- 这只是的简单的例子,通过网址参数控制自己的id,和私聊的对象
- http://localhost/ws.html?1:2 //我的id是1,我只能给2发消息
- http://localhost/ws.html?1 //我的id是1,我一般不发,一发就是群发
- http://localhost/ws.html?:1 //我没有id,我只能接收群发信息,我只能给1发消息
- http://localhost/ws.html //专业群发
- 安装node.js
- 安装ws模块
npm install ws --save
node.js端代码
//这是运行在node.js上的
const WebSocket = require('ws');
const wss = new WebSocket.Server({
port:3030,
verifyClient: yan//验证要不要给连接
})
function yan(info){
let url = info.req.url
// let i = url.search(6);
// if (i<0){
// console.log('拒绝连接');
// return false;
// }
console.log('通过连接' + url);
return true;
}
let user={};//存储连接用户
let online=0;//存储在线人数
wss.on('connection',function(ws,req){
online =wss._server._connections;
console.log('当前在线' + online+'个连接');
ws.send('当前在线' + online+'个连接');
let i = req.url;//提取网址参数
let m = i.match(/(?<=\?)[^:]+?(?=:|$)/); //提取我是谁,这部分代码只有第一次连接的时候运行,如果后面连接的m值相同,前面的连接会被覆盖身份
if(m){
user[m] = ws;
};
let u = i.match(/(?<=:).+?$/); //提取发给谁
ws.on('message',function(msg){
console.log('收到'+i+'的消息:'+msg);
// ws.send(req.headers['sec-websocket-key'])
// ws.send(req.url)
if(u){
if (user[u]){
if (user[u].readyState===1){
user[u].send(msg);
ws.send('发送成功');
}else{
ws.send('对方掉线');
}
}else{
ws.send('找不到对象');
}
}else{//广播
wss.clients.forEach(function each(client) {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(msg);
}
});
}
if (online != wss._server._connections){
online = wss._server._connections;
ws.send('当前在线' + online + '个连接');
}
// ws.send(req.headers.origin)
// ws.send(JSON.stringify(Array.from(wss.clients)))
// ws.send(JSON.stringify(ws))
// ws.send(JSON.stringify(req))
})
})
浏览器端代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="a"></div>
<input type="text" id="text"> <input type="button" value="发送" id="btn">
<hr>
<div id="b"></div>
<script>
let i=location.search;
// ?1:2 我是1,我要发给2
// ?1 我是1,要么不发,一发就群发
// ?:2 别管我是谁,我要发给2
i=i.replace(/[^\d\?:]/g,'') //这条是去掉不是数字的,其实有字母也行的
let m=i.match(/(?<=\?)[^:]+?(?=:|$)/) //提取我是谁
let u=i.match(/(?<=:).+?$/) //提取发给谁
m=m?m+',':'谁?'
u=u? '我给' + u + '发信息':'我群发'
a.innerHTML=('我是'+ m + u)
//-----------------------分割线----------------------------------------------
let ws =new WebSocket('ws://localhost:3030/'+i)
ws.onmessage=(evt)=>{
console.log(evt.data)
b.innerHTML += (evt.data+'<br>')
}
ws.onopen=()=>{
console.log('连接成功')
b.innerHTML += ('连接成功<br>')
// ws.send('你好')
}
ws.onerror=()=>{
console.log('连接错误')
b.innerHTML += ('连接错误<br>')
}
ws.onclose=()=>{
console.log('连接关闭')
b.innerHTML += ('连接关闭<br>')
}
//-----------------------分割线----------------------------------------------
btn.onclick=()=>ws.send(text.value? text.value:u)
</script>
</body>
</html>