WebSocket

WebSocket

WebSocket

  • WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
  • ** **服务器可以把接收到某一个客户端的数据，处理之后，转发响应给连接于他的其他每一台客户端上。

>> 前端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<body>
  <button id="connect">连接服务端</button>
  <button id="send" disabled="true">发送数据</button>
  <br />
  <span id="recv">接受的数据是：</span>
  <script>
    var connect = document.querySelector("#connect");
    var send = document.querySelector("#send");
    var recv = document.querySelector("#recv");
    let ws = null;
    // 连接服务器
    connect.onclick = function () {
      ws = new WebSocket("ws://localhost:9998");
      ws.onopen = () => {
        console.log("服务器连接成功了...");
        // 连接成功 可以发送数据了
        send.disabled = false;
      };
      ws.onclose = () => {
        console.log("连接服务失败了...");
        // 连接失败 还是禁用发送数据按钮
        send.disabled = true;
      };
      ws.onmessage = (msg) => {
        console.log("接收到了从服务器发送过来的数据了");
        console.log(msg);
        recv.innerHTML = msg.data;
      };
    };
    // 发送数据
    send.onclick = function () {
      console.log(ws);
      ws.send("客户端发送来的数据，bzj!");
    };
  </script>
</body>

**>> 后端 koa2 **

先需要下载包

npm i ws -S

app.js 中配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const WebSocket = require("ws");
// 创建WebSocket服务器的对象，绑定的端口号是9998
const wss = new WebSocket.Server({
  port: 9998,
});
// 对客户端的连接事件进行监听
// client 代表的是客户端的连接socket对象
wss.on("connection", (client) => {
  console.log("有客户端连接成功了...");
  // 对客户message事件进行监听
  // msg: 由客户端发送给服务器的数据
  client.on("message", (msg) => {
    console.log("客户端发送数据给服务端了：" + msg);
    // 由服务器往客户端发送数据
    client.send("服务器发来的数据！");
  });
});

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！