几十行代码实现一个简单聊天室的功能

1、前言

Socket.io将数据传输部分独立出来形成engine.io，engine.io对WebSocket和AJAX轮询进行了封装，形成了一套API，屏蔽了细节差异和兼容性问题，实现了跨浏览器/跨设备进行双向数据通信。
WebSocket是一种**双向通信协议，**WebSocket与HTTP协议一样都是基于TCP的

2、功能与效果

• 登陆、登出
• 多用户聊天
• 效果如下

3、目录结构

4、Node端服务

socket.io 服务需要依赖http服务，通过安装express，起一个http服务，然后安装socket.io

npm i socket.io express -S

通过访问localhost:3000 访问页面

// app.js
const app = require("express")();
const server = require("http").Server(app);
const io = require("socket.io")(server);

app.get("/", function (req, res, next) {
   
  res.sendFile(__dirname + "/index.html");
});

server.listen("3000", function () {
   
  console.log("服务启动在3000");
});

服务端用到的socket.io的api

const io = require("socket.io")(server);
// 连接socket.io
io.on("connect", (socket) => {
   
    // socket.emit 代表着向客户端发送消息，客户端通过 socket.on("receive", params); 接收
    socket.emit("receive",params);
    // socket.on('send') 代表着接收客户端发来的消息， 客户端通过 socket.emit("send", params); 发送
    socket.on("send",params);
    // io.emit("all") 代表广播，给每个客户端发消息
    io.emit("all",params)
}) 

5、客户端socket的使用

客户端主要是使用socket.io的 emit 发送消息和on接收消息，和服务端的api相同
index.html

// 客户端需要引入包
<script src="/socket.io/socket.io.js"></script>
<script>
    // 使用
    let socket = io("http://localhost:3000");
    // 1、等待服务端的消息通知
    socket.on("notify", (username) => {
   
      message(`${
     username}加入进来了!`, 1);
    });
     // 2、发送消息给服务端
    function send() {
   
      if (!info.value) message("请输入消息", 0);
      socket.emit("message"