websocket协议

Webscoket是Web浏览器和服务器之间的一种全双工通信协议 ,其中WebSocket协议由IETF定为标准,WebSocket API由W3C定为标准。 一旦Web客户端与服务器建立起连接,之后的全部数据通信都通过这个连接进行。 通信过程中,可互相发送JSON、XML、HTML或图片等任意格式的数据。
我们将基于这个协议,实现聊天室的功能

下载ws模块

npm i ws

node服务端代码

const WebSocket = require("ws")
const { WebSocketServer } = require("ws")

const wss = new WebSocketServer({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.on('error', console.error);

  ws.on('message', function message(data, isBinary) {
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(data, { binary: isBinary });
      }
    });
  });
  ws.send("欢迎进入聊天室")
});

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>聊天室</h1>
    <script>
        var ws = new WebSocket("ws://localhost:8080")

        ws.onopen = ()=>{
            console.log("连接成功")
        }
        ws.onmessage = (msgObj)=>{
            console.log(msgObj.data)
        }

        ws.onerror = ()=>{
            console.log("error")
        }
    </script>
</body>
</html>

测试

打开两个前端页面(客户端),在一个客户端控制台输入ws.send(“hello”)

在另一个客户端的控制台就能收到hello这个消息了,


这里其实已经相当一个群聊功能了,只是聊天的用户都是互相不知道的,接下来作者会使用登录验证,让所有用户能够彼此能够认识
让我们实现私聊功能吧!!