我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

socket.io除去协议切换那些事儿来说，单单这个发送消息的基本功能，都是很复杂繁琐的。本文说广播功能，可以理解为一对多发送消息，具体的函数操作细节上还是有很多不同的。特别是socket.io增加了房间的概念后，这个事情就又更加复杂了。

苏南大叔：Socket.io双向通信教程，广播broadcast相关方法 - socket
Socket.io双向通信教程，广播broadcast相关方法（图2-1）

苏南大叔的“程序如此灵动”博客，记录苏南大叔的代码编程经验总结。测试环境：win10，nodejs@20.18.0，express@4.21.2，socket.io@4.8.1。本文主要讲述socket.io消息广播的事情，本文中的广播所指范围较大，并不局限于代码中的.broadcast()函数相关字样。

前文回顾

目前一共写了下面几篇socket.io的文章了，链接如下：

本文再次回归本源，聚焦于socket.io的消息发送问题。本文的代码主要集中在服务端，客户端的代码占比较少。为了测试效果，需要有多个不同的用户访问。本地测试的话，可以利用多个不同的浏览器来进行模拟。

基础概念 room

在socket.io里面，增加了room的概念。那么，这里就存在着一个join和leave的问题。加入了一个房间后，实际面对的是接收这个房间专属的消息的问题。

服务端代码：

// ...
const io = socketio(expressServer);
io.on("connection", (socket) => {
    socket.on("join", (room) => {
        socket.join(room);
        io.to(room).emit("message", "欢迎" + socket.id + "加入房间" + room);
    });
    socket.on("leave", (room) => {
        socket.leave(room);
        io.to(room).emit("message", socket.id + "已离开房间" + room);
    });
});
// ...
JavaScript

客户端代码：

const socket = io();
socket.on("connect", () => {
  socket.emit('join', "room_id_1");
  socket.emit('leave', "room_id_1");
  //...
});
JavaScript

代码框架

服务端代码测试框架：

// ...
const io = socketio(expressServer);
io.on("connection", (socket) => {
    socket.on("message", (msg) => {
        // 重点看这里！！！
        // 测试代码放在这里
        // 重点看这里！！！
    });
});
// ...
JavaScript

下面的代码里面，发送者有两个。

  • io，这个就像系统，无差别发送。
  • socket，这个就像玩家，仅仅是个特殊的个体。

io 发消息(服务端)

io.to(socket.id).emit("message", "服务端返回给当前socket");
io.to(1).emit("message", "[房间1]专属的消息，加入该房间的人都可以收到");
io.emit("message", "所有人都可以收到的消息（包括当前socket）");
io.sockets.emit('message', "所有人都可以收到的消息");
io.send("s所有人都可以收到的消息（包括当前socket）");
io.sockets.send("s所有人都可以收到的消息");
JavaScript

socket 发消息(服务端)

socket.emit('message', "系统发给当前用户的消息");
socket.to(1).emit("message", "[房间1]所有的人都可以收到的消息，当前socket收不到");
socket.broadcast.emit("message", "所有人都可以收到的消息（不包括当前socket）");
socket.send("s系统发给当前用户的消息");
JavaScript

完整测试代码

服务端：

let express = require("express");
let app = express();
app.use(express.static('public'));
let expressServer = app.listen(80, () => console.log('http://localhost:%s', expressServer.address().port));
const socketio = require("socket.io");
const io = socketio(expressServer);
io.on("connection", (socket) => {
    socket.on("join", (room) => {
        socket.join(room);
        io.to(room).emit("message", "欢迎" + socket.id + "加入房间" + room);
    });
    socket.on("leave", (room) => {
        socket.leave(room);
        io.to(room).emit("message", socket.id + "已离开房间" + room);
    });
    socket.on("message", (msg) => {
        io.to(socket.id).emit("message", "服务端返回给当前socket");
        io.to(1).emit("message", "[房间1]专属的消息，加入该房间的人都可以收到");
        io.emit("message", "所有人都可以收到的消息（包括当前socket）");
        io.sockets.emit('message', "所有人都可以收到的消息");
        
        socket.emit('message', "系统发给当前用户的消息" + msg);
        socket.to(1).emit("message", "房间1所有的人都可以收到的消息，当前socket收不到");
        socket.broadcast.emit("message", "所有人都可以收到的消息（不包括当前socket）");
    });
});
JavaScript

客户端public/test.html，（多开以进行测试）：

<button onclick="test()">发送消息</button>
<button onclick="join(1)">加入房间1</button>
<button onclick="leave(1)">离开房间1</button>
<button onclick="join(2)">加入房间2</button>
<button onclick="leave(2)">离开房间2</button>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
socket.on("connect", () => {
  const transport = socket.io.engine.transport.name; // 在大多数情况下, "polling"
  console.log(transport);
  socket.io.engine.on("upgrade", () => {
    const upgradedTransport = socket.io.engine.transport.name; // 在大多数情况下, "websocket"
    console.log("升级为：",upgradedTransport);
  });
});
socket.on('message', message => {
  console.log(message);
});
function test(){
  socket.emit('message', "button Hello, Server!");
}
function join(room){
  socket.emit('join', room);
}
function leave(room){
  socket.emit('leave', room);
}
</script>
HTML

苏南大叔：Socket.io双向通信教程，广播broadcast相关方法 - 测试结果
Socket.io双向通信教程，广播broadcast相关方法（图2-2）

结语

苏南大叔写的socket.io相关经验文章，请点击下面的链接：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   socket