socket.io

第三方的支持 websocket 的一个模块。WebSocket 是 html5 中提供的。实现了兼容处理，能让我们在不支持 WebSocket 的浏览器中也能实现我们的功能点。

//引入express插件
const express = require("express");
//引入path插件实现绝对路径的获取
const path = require("path");
//引入socket.io插件
const socketIo = require("socket.io");
let server = express();
//获取绝对路径
//静态文件托管
server.use(express.static(path.resolve(__dirname, "./public")));
//监听端口,在监听了端口后才能进行以下操作
server = server.listen(3000);

// ====

let index = 0; // 用来表示当前链接的名字
//监听server
const io = socketIo.listen(server);
io.on("connection", socket => {
  console.log("有客户端链接进来了");

  // 给当前实例添加个 username
  socket.username = ++index;

  // 给其他实例发送消息
  socket.broadcast.emit("message", {
    username: "System",
    message: `${socket.username} 加入了聊天室`
  });

  // 监听客户端发来的消息
  socket.on("message", message => {
    socket.emit("message", {
      username: socket.username,
      message: message
    });

    // 给其他人发
    socket.broadcast.emit("message", {
      username: socket.username,
      message: message
    });
  });
});

html

  <input type="text" id="message" />
    <button id="btn">发送</button>

    <div id="messages">
      <!-- <div>
        <span>xxx:</span>
        <span>yyyyyyyy</span>
      </div> -->
    </div>

    <!-- 1. 引入 socket.io.js 文件 -->
    <script src="/socket.io/socket.io.js"></script>
    <!-- 2. 使用 io 变量去链接 -->
    <script>
      const socket = io();

      // 1. 监听服务端发送过来的消息
      socket.on("message", data => {
        // let html = `
        //   <div>
        //     <span>${data.username}:</span>
        //     <span>${data.message}</span>
        //   </div>
        // `;

        let html = document.createElement("div");
        let span1 = document.createElement("span");
        let span2 = document.createElement("span");
        span1.innerHTML = `${data.username}`;
        span2.innerHTML = `${data.message}`;
        html.appendChild(span1);
        html.appendChild(span2);

        document.getElementById("messages").appendChild(html);
      });

      // 2. 发送消息给服务端
      document.getElementById("btn").onclick = function() {
        let value = document.getElementById("message").value;
        //emit数据传输
        socket.emit("message", value);
      };
    </script>