WebSocket使用demo，node作后端服务器

最新推荐文章于 2023-10-31 15:34:08 发布

飞翔的熊blabla

最新推荐文章于 2023-10-31 15:34:08 发布

阅读量294

点赞数

分类专栏： html+js+jquery+css 文章标签： websocket node.js html5

原文链接：https://blog.csdn.net/qq_27577113/article/details/119966724?utm_medium=distribute.pc_feed.none-task-blog-personrec_tag-5.nonecase&depth_1-utm_source=distribute.pc_feed.none-task-blog-personrec_tag-5.nonecase

版权

html+js+jquery+css 专栏收录该内容

641 篇文章 14 订阅

订阅专栏

WebSocket使用demo，ws前后端通信，服务器为nodejs
效果
服务端代码
客户端代码
写个ws通信demo看看
后端用的nodejs-websocket
安装完node后
使用npm install nodejs-websocket命令安装socket服务端组件

效果
打开3个网页，一个昵称为111，一个昵称为222，一个昵称为333，可以指定发送人，不输入发送给谁默认就是广播消息
指定发送给谁

广播

服务端代码
var ws = require('nodejs-websocket');
var userMap = {};//服务器维护的客户端连接映射表
var customer = [];//所有客户端
var server = ws.createServer(function(socket){
if(!dealConnect(socket)){
console.log("客户端连接失败,没有填写必要的参数[name]")
socket.sendText('连接失败,请输入昵称后重试');//给客户端返回消息
socket.close();//关闭连接
return;
}
　 console.log("新连接到了");
customer.push(socket);

　　// 前端传来的消息处理事件名称为text，接受文本信息
socket.on('text', function(str) {
var data = JSON.parse(str);
if(data.toUesr&&data.toUesr.length>0){
socket.sendText("服务器端收到["+data.name+"]给["+data.toUesr+"]发送的消息："+data.txt);
//向指定用户发
sendMsgToUser(data);
}else{
console.log("收到前端消息:"+str)
//广播
server.connections.forEach(client=>{
client.sendText("服务器端收到["+data.name+"]发送的消息："+data.txt);
})
}
});
// socket.on('connect', function(code) {
// console.log('开启连接', code)
// })
socket.on('error', function(code) {
console.log('客户端异常关闭', code)
socket.close();
socket=null
})
// socket.on('close', function(code) {
// console.log('关闭连接', code)
// for (const key in customer) {

// }
// })

}).listen(3000);//监听端口3000

//处理连接请求
function dealConnect(socket){
if(socket.path&&socket.path.length>0){
let path = socket.path;
let name = getValFromPathByKey(path,"name");
//将拥有用户名的socket添加到用户连接表
if(name){
userMap[name] = socket;
return true;//连接成功
}
}
return false;//连接失败
}

//将消息发给指定用户
function sendMsgToUser(data){
if(data){
for (const user in userMap) {
if(user==data.toUesr){
userMap[user].sendText("用户"+data.name+"给你发消息了:"+data.txt);
}
}
}
}

//根据key获取path中的参数
function getValFromPathByKey(path,key){
if(path&&path.length>0){
let paramsStr = path.substr(path.indexOf("?")+1);
let KVStrArr = paramsStr.split("&");
let params = {};
if(KVStrArr&&KVStrArr.length>0){
for (let i = 0; i < KVStrArr.length; i++) {
const item = KVStrArr[i];
let k = item.split("=")[0];
let v = item.split("=")[1];
params[""+k+""] = v;
}
}
return params[key];
}
return null;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
客户端代码
<!DOCTYPE HTML>
<html>

<head>
<title>My WebSocket</title>
</head>

<body>
Welcome<br />
昵称<input id="name" type="text" /></br>
指定发送给<input id="to" type="text" /></br>
消息<input id="text" type="text" /></br>
<div style="display: flex;flex-direction: column;width: 100px;">
<button class="connect">Connect</button>
<button class="send">Send</button>
<button class="close">Close</button>
<button class="clear">Clear</button>
</div>
<div id="message">

</div>
</body>
<script type="text/javascript">
var ws = null;
window.onload = function(){
//注册打开websocket连接按钮
var connectBtn = document.querySelector(".connect");
connectBtn.onclick = function(e){
if(ws){
ws.close();
ws = null;
}
var name = document.querySelector("#name").value;
// 打开一个websocket, 这里端口号和上面监听的需一致
ws = new WebSocket('ws://localhost:3000/connect?name='+name);
//websocket连上后，使用send()方法发送数据
ws.onopen = function(res) {
appendToMsgBox("已连接服务端..."+res.currentTarget.url);
}
// 服务端发送过来的消息
ws.onmessage = function(res) {
appendToMsgBox("服务端:"+JSON.stringify(res.data))
}
// 断开websocket触发
ws.onclose = function(res){
appendToMsgBox("已断开连接 "+res.currentTarget.url);
}
}
//注册发送消息按钮
var sendBtn = document.querySelector(".send");
sendBtn.onclick = function(e){
if(ws){
var name = document.querySelector("#name").value;
var toUesr = document.querySelector("#to").value;
var txt = document.querySelector("#text").value;
var data = {
txt:txt,
toUesr:toUesr,
name:name
};
ws.send(JSON.stringify(data));
}else{
appendToMsgBox("服务端未连接.");
}
}
//注册断开websocket按钮
var closeBtn = document.querySelector(".close");
closeBtn.onclick = function(e){
if(ws){
ws.close();
ws = null;
}else{
appendToMsgBox("服务端未连接.");
}
}
//注册清除屏幕内容按钮
var clearBtn = document.querySelector(".clear");
clearBtn.onclick = function(e){
document.querySelector("#message").innerHTML = "";
}
}
//将内容显示到屏幕中
function appendToMsgBox(msg){
var msgBoxDom = document.querySelector("#message");
msgBoxDom.innerHTML += new Date().getTime()+"::"+ msg +"</br>";
}
</script>

</html>

飞翔的熊blabla

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebSocket使用demo，node作后端服务器

WebSocket使用demo，ws前后端通信，服务器为nodejs效果服务端代码客户端代码写个ws通信demo看看后端用的nodejs-websocket安装完node后使用npm install nodejs-websocket命令安装socket服务端组件效果打开3个网页，一个昵称为111，一个昵称为222，一个昵称为333，可以指定发送人，不输入发送给谁默认就是广播消息指定发送给谁广播服务端代码var ws = require('nodejs-websocket')
复制链接

扫一扫

专栏目录