WebSocket 实现长连接演示代码
服务端代码(node)
const WebSocket = require('ws')
const ws = new WebSocket.Server({ port: 8080 },()=>{
console.log('socket start')
})
// 创建服务器
// 连接监听 clinet表示已经连接的客户端对象有多个
let clinets=[] //保存所有客户端连接
ws.on('connection',(clinet)=>{
console.log('客户端已连接')
clinets.push(clinet)
// clinet.send('欢迎广临')// 主动向前端发送数据 只能发送字符串
clinet.on('message',(msg)=>{
// 监听客户端发送消息
console.log('来自前端的问候:')
console.log(msg)
})
clinet.on('close',(msg)=>{
// 客户端主动断开连接
console.log('客户端主动断开连接')
})
})
setTimeout(()=>{
sendAll()
},20000)
//群发 广播
function sendAll(){
for (let index = 0; index < clinets.length; index++) {
let num=parseInt(Math.random()*200)%3+1
clinets[index].send(JSON.stringify({type:num}))
}
}
客户端(H5)
<!DOCTYPE html>
<html lang="en">
<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>
<button onclick="sendserver()">send server</button>
<script>
const ws = new WebSocket('ws://localhost:8080/')
ws.onopen=function(){
console.log('与服务器连接')
}
ws.onmessage=function(msg){
console.log(msg)
console.log('来自服务器的问候:'+msg.data)
let data=JSON.parse(msg.data)
switch(data.type){
case 1 :
alert('恭喜中间')
break;
case 2 :
alert('会员到期')
break;
case 3 :
alert('收到信息请注意查收')
break;
}
}
ws.onclose=function(){
console.log('服务器主动断开连接')
}
function sendserver() {
ws.send('你好我来了')
}
</script>
</body>
</html>
ps
1.websocket 长连接是没有跨域问题的
2.服务器端和客户端都是多对多的
3.websocket是H5的新特性,受浏览器限制,因此老版本的浏览器可能就不行了