客户端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)
    }
}

websocket实现聊天室功能

客户端index.html

服务端webSocketServer.js

猜你喜欢