客户端index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#msglist{
width: 400px;
height: 500px;
background: #eee;
}
</style>
</head>
<body>
<div id="msglist">
</div>
<textarea id="msg" rows="5" cols="20"></textarea>
<button id="btn">留言</button>
<script>
var $btn = document.querySelector('#btn')
var $msg = document.querySelector('#msg')
var $msglist = document.querySelector('#msglist')
//创建一个websocket实例
//http=>new Websocket("ws://***")
//https=>new Websocket("wss://***") 不能是ip
var ws = new WebSocket("ws://localhost:8099")
function wsEvent() {
//用于指定当从服务器接收信息时的回调函数
ws.onmessage=(msg)=>{
console.log(msg.data);
$msglist.innerHTML+=msg.data+'<br>'
}
//用于连接成功之后的回调函数
ws.onopen=()=>{
console.log('open....');
}
//用于指定连接关闭后的回调函数
ws.onclose=()=>{
console.log("close...");
reconnect()
}
//连接失败的回调
ws.onerror=()=>{
console.log("onerror...");
reconnect()
}
}
wsEvent()
$btn.addEventListener('click', () => {
//数据的发送
ws.send($msg.value)
})
//重连
function reconnect(){
//判断ws的状态
if(ws.readyState===2 || ws.readyState===3){
ws = new WebSocket("ws://localhost:8099")
wsEvent()
}
}
</script>
</body>
</html>
服务端webSocketServer.js
安装ws第三方模块https://www.npmjs.com/package/ws
const ws = require('ws')
const websocketServer = new ws.Server({port:8099})
//所有的客户端列表
var clientlist={}
var id=0
websocketServer.on('connection',(client)=>{
client.id=id++
clientlist[id]=client
console.log("connection...")
client.send('welcome to back')
client.on('message',(msg)=>{
console.log(msg);
boardcast(client.id+":"+msg)
})
//client退出时的事件
client.on('close',()=>{
boardcast(client.id+"下线了")
delete clientlist[client.id]
})
})
//广播通知所有客户端
function boardcast(message){
for(let o in clientlist){
clientlist[o].send(message)
}
}