Socket.io 的使用

Socket.io 是由js实现,基于 node.js ，支持 WebSocket 协议用于实时通信，跨平台的开源框架

一、文档

官方文档：Socket.IO

第三方中文文档： socket.io官方文档中文版 - 知乎

项目例子：在线聊天: 使用vue2和socket.io实现的在线聊天 (gitee.com)

 

二、 下载 Socket.Io

服务端下载

npm i socket.io@4.5.0

客户端下载

npm i socket.io-client

 

三、Socket.io 的使用

Socket.io 的搭建以及接收和发送信息的基本使用

 

1. 配置

服务端 引入并配置 Socket.io

const { createServer } = require("http");
const { Server } = require("socket.io");

const httpServer = createServer();
const io = new Server(httpServer, {  
    cors: {                 //解决跨域问题
        origin: "*",
        methods: ["GET", "POST"]
  } 
});

 服务端 建立连接

io.on("connection", (socket) => {
	console.log('建立链接');
    
    // 在这回调函数里面接收和转发信息
});

客户端 引入 Socket.io 并建立链接

import { io } from "socket.io-client";	// 引入下载的依赖
let socket = io.connect("http://localhost:3000/");	// 与服务端建议链接
// http://localhost:3000/ 这是服务端的地址

此时，服务端会输出 “建立链接” ，输出了这句话，证明客户端已经和服务端成功建立了链接

 

2. 发送和接收信息

socket.emit()         发送信息

socket.on()            接收信息

2.1 客户端向服务端发送信息

客户端 发送消息

socket.emit("login", '你好，我是客户端');

服务端 接收信息

socket.on('login', (data) => {
	 console.log( data ); // 你好，我是客户端
})

服务端输出 “你好，我是客户端” ，证明已经成功发送和接收消息

 

2.2 服务端向客户端发送信息

发送和接收和上面是一样的

服务端 发送信息

socket.emit("pushMsg", '你好，我是服务端');

客户端 接收信息

socket.on('pushMsg', (data) => {
	 console.log( data ); // 你好，我是服务端
})

 客户端输出 “你好，我是服务端” ，证明已经成功发送和接收消息

 

3. 客户端离开

当客户端与服务端断开连接，服务端能够通过 disconnecting 知道有客户端断开了链接

socket.on("disconnecting", () => {
    // 有客户端断开了链接
     console.log( "客户端断开链接了" );
});

 

四、 服务端发送信息

服务端有多种方法向客户端发送信息

 1. 只对自己发送信息

服务端只发送当前建立链接的客户端

socket.on('login', (data) => {
    socket.emit('pushMsg', '你好，我是服务端')
})

 2. 对指定的客户端发送信息

服务端能对所有建立连接的指定客户端发送信息

socket.on('login', (id,data) => {
    // 这个 id 是客户端与服务端建立连接时生成的，可能通过 socket.id 获取
   socket.to(id).emit('pushMsg', data)
})

 

 3. 对所有客户端发送信息

对所有建立链接的客户端发送信息

socket.on('login', (id,data) => {
   // 通过实例调用 emit ，向所有客户端发送信息
   io.emit('pushMsg', data)
})