Socket.io入门

根据官方文档socket.io使用必须客户端根服务端一致，socket.io不兼容webSocket或者其他模块，因为socket.io在连接时做了自定义处理，
所以不同的长连接npm模块并不互通

首先安装npm包:

客户端(vue):

npm i socket.io-client@4.7.2

服务端(express):

npm i socket.io@4.7.2

因为socket.io不同版本之间使用方法有差异，本文写作时采用的是4.7.2版本

简单使用express.js+socket.io搭建一个服务器用来测试：

/**
 * @file server.js
 * */

import express from "express";
import { createServer } from "http";
import { Server } from "socket.io";
const app = express();
const httpServer = createServer(app);
const io = new Server(httpServer, { 
  cors: {
    /* 需要指定，要不然本地调试过程中会产生跨域*/
    origin: "*",
  }
});

/* 这里就是当客户端socket连接到服务端socket的生命周期 */
io.on('connection',function(socket) {
  /* io.emit(事件名,参数) */
  io.emit('message','恭喜连接成功');
})
httpServer.listen(3000, () => console.log("run"));

/**
 * @file client.js
 * */
import {io} from 'socket.io-client'
/* 指定连接的地址 */
const socket = io('ws://localhost:3000');
socket.connect();
socket.on('message',message=>{
  console.log('我是客户端,接收到了数据',message);
})

以上就是一个简单的socket.io通信的例子,下面记录一些常用用法,首先要了解socket.io基本概念

Socket.IO 中的每一个socket都由一个随机的、不可猜测的、唯一的标识符Socket#id。为了您的方便，每个socket都会自动加入一个由其自己的 id 标识的房间

房间是一个虚拟的仅存在于服务端的虚拟的概念，类似于分组的意思。

  • 加入房间 socket.join(roomName);
  • 离开房间 socket.leave(roomName);
  • 查询当前连接是否已加入该房间
const room = io.sockets.adapter.rooms.get(roomName);
if (room && room.has(socket.id)) {
  /* 已加入 */
}
  • 发送消息给单个连接的客户端 io.in(socket.id).emit(事件名,参数)
  • 在房间内发送广播 io.in(roomName).emit(事件名,参数)
  • 获取房间内的连接数(promise) await (io.in(roomName).fetchSockets()).length

写于2023年09月04日