首页 > 编程语言 >websocket(二)——基于node js 的同步聊天应用

websocket(二)——基于node js 的同步聊天应用

时间:2022-12-09 10:31:07浏览次数:66  
标签:node function console log js websocket 服务端 客户端

 

​https://github.com/sitegui/nodejs-websocket​

1.用node搭建本地服务

npm install nodejs-websocket

 

var ws = require("nodejs-websocket");
var server = ws.createServer(function(conn){
console.log('New Connection!');
conn.on('text',function(str){
console.log('receive' + str);
conn.sendText(str.toUpperCase() + '!!!');
})
conn.on('close',function(code,reason){
console.log('Connection closed');
})

//服务出现错误时用来处理错误,如果不加出现错误服务就会挂掉
// conn.on('error',function(err){
// console.log('handle error');
// console.log(err);
// })
}).listen('3000');
console.log('node websocket run listening on port 3000')

客户端代码实现

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>websocket测试</title>
<style>
input {
outline: none;
}

.content {
margin-top: 20px;
width: 300px;
min-height: 100px;
border: 1px solid blue;
}
</style>
</head>

<body>
<h3>websocket演示</h3>
<input type="text" id='txt'>
<button id='sendTxt'>发送</button>
<div class='content' id='receiveMsg'></div>
<script>
var websocket = new WebSocket('ws://localhost:3000/');
websocket.onopen = function() {
console.log('websocket open');
document.getElementById('receiveMsg').innerHTML = 'Connected';
};
websocket.onclose = function() {
console.log('websocket close');
};
websocket.onmessage = function(e) {
console.log(e);
document.getElementById('receiveMsg').innerHTML = e.data;

};
document.getElementById('sendTxt').onclick = function() {
var txt = document.getElementById('txt').value;
websocket.send(txt);
};
</script>
</body>

</html>

简单的websocket应用,只是将客户端收到的信息发送到服务端,将原字符串转化为大写后加上三个!!!后返回;

 

改进后的代码如下:

 

服务端代码:

 

 

客户端代码:

 

 

有点:加入了进入聊天室,离开聊天室等字段,并对每一个连接的客户端做了简单的区分;

缺点:服务端和客户端只是简单的基于字符串的交互,没有对数据的属性进行区分,相对简单;

 

服务端代码:

 

客户端代码:

 

有点:在服务端对消息的属性进行了包装,并在客户端进行不同效果的展示,在服务端需要将对象转化为字符串才能发送到客户端,不够灵活;

最终效果:

 

 




标签:node,function,console,log,js,websocket,服务端,客户端
From: https://blog.51cto.com/u_15707676/5923971

相关文章

  • js base64与Uint8Array互转
    1.情景展示base64如何转Uint8Array?Uint8Array如何转成base64?2.base64转Uint8Array/***base64字符串转为uint8array数组*/constbase64ToUint8Array=functio......
  • js利用Random获取随机值
    js利用Random获取随机值JS生成指定范围内的随机数(支持随机小数)-jack_Meng-博客园(cnblogs.com)Math:数学对象,提供对数据的数学计算。1.Math.random();返回为0-1间......
  • js中如何顺序执行异步任务
    在js中,任务可分为两种,同步任务和异步任务。(1)同步任务又叫非耗时任务,指的是在主线程排队执行的那些任务只有前一个任务执行完毕,才能执行后一个任务(2)异步任务又......
  • [未解决] write javaBean error, fastjson version 1.2.76, class org.springframewor
    本地测试正常,打包部署后报错如下:writejavaBeanerror,fastjsonversion1.2.76,classorg.springframework.security.web.header.HeaderWriterFilter$HeaderWriterResp......
  • 使用TWEEN.js时update更新发现初始点位全部变成NaN
    在只用tween时只要执行了update方法就会发现传入的点变为NaN,从而导致模型消失console.log(t.target,t.paras);tw=newTWEEN.Tween(t.paras).to(t.target,d)......
  • 官网下载UEditor文件没有ueditor.all.js、ueditor.all.min.js文件
    需本机已安装node.js安装Grunt执行命令npminstall-ggrunt-cli以安装grunt,等待呈现如下图所示界面就算成功 建立 C:\ueditor\ 目录。在建立需要的版本目录 ,......
  • Threejs:光影
     环境光constcolor=0xFFFFFF;constintensity=1;constlight=newTHREE.AmbientLight(color,intensity);scene.add(light);创建地面constplaneSize=......
  • js 把一个数组赋值给另一个数组
    varaArr=["a","b","c"];varbArr=aArr;这种情况下的赋值无论是对aArr还是bArr做出操作(例如删除数组中的一个元素),都将影响另一个,因为数组是指向原位置的。要切断两......
  • Threejs:捕获鼠标位置
     //获取鼠标坐标functiononPointerMove(event){//将鼠标点击位置的屏幕坐标转换成threejs中的标准坐标mouse.x=(event.clientX/window.innerWidth)*2-......
  • Threejs:创建矩阵
     设置顶点创建矩形constgeometry3=newTHREE.BufferGeometry();constvertices=newFloat32Array([-1.0,-1.0,1.0,1.0,-1.0,1.0,1.0,1.0,1.0,......