服務端代碼(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的新特性,受瀏覽器限制,因此老版本的瀏覽器可能就不行了