soket.io

94 阅读1分钟

websocket 是在http1.0,http1.1基础上运行的协议,客户端与服务端先建立http连接,客户端发送upgrade请求,双方再建立号socket双工通信

socket.io会判断客户端是否支持websocket,如果不支持降级为http沦陷

socket.io可以自定义事件发送到对端,对端可以是服务器,可以是客户端;使用emit发送,接收还是on

image.png

服务端

const http = require("http");
const io = require("socket.io");
const fs = require("fs");

const server = http.createServer((request, response) => {
  response.writeHead(200, { "Content-Type": "text/html" });
  if (request.url == "/") {
    fs.readFile("./index.html", (error, data) => {
      if (error) return console.log(error);
      response.end(data.toString("utf8"));
    });
  } else {
    response.end("<html>error</html>");
  }
});

server.listen(3000);
const socket = io(server);
socket.on("connection", (connect) => {
  connect.on("message", (message) => {
    console.log("message", message);
  });
  connect.on("disconnect", () => {
    console.log("connection has lost");
  });
  connect.send("hello client");
  // 自定义发送 事件
  connect.emit("server_event", "this is server event");
  connect.on("client_event", (message) => {
    console.log(message);
  });
  // 广播 broadcast
  connect.on("broadcast_client_event", (message) => {
    console.log(message);
    // 广播给所有客户端
    connect.broadcast.emit("broadcast_server_event", "你好 服务器广播");
  });
});

客户端

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 推荐的写法:socket.io 内置的路径,如果服务器是nodejs用的socket.io建立http,则自动映射到socket.io的js文件 -->
    <script src="/socket.io/socket.io.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div>客户端</div>
    <script>
      const socket = io("http://localhost:3000");
      socket.on("message", (message) => {
        console.log(message);
        socket.send("hello server");
      });
      socket.on("disconnect", () => {
        console.log("disconnect");
      });
      // 自定义接收事件
      socket.on("server_event", (message) => {
        console.log("server_event", message);
      });
      socket.emit("client_event", "client envent");
      // 广播
      socket.emit("broadcast_client_event", "广播到所有客户端");

      socket.on("broadcast_server_event", (message) => {
        console.log("server_event", message);
      });
    </script>
  </body>
</html>

自定义事件

双方采用 emit 和 on

socket.on("server_event", (message) => {
    console.log("server_event", message);
});
// 自定义发送 事件
  connect.emit("server_event", "this is server event");

广播

服务端不用再去维护所有connect列表,直接调用 connect.broadcast.emit 触发广播事件,只会广播给其他客户端,不会广播给自己客户端

// 广播 broadcast
  connect.on("broadcast_client_event", (message) => {
    console.log(message);
    // 广播给所有客户端
    connect.broadcast.emit("broadcast_server_event", "你好 服务器广播");
  });