node.js中使用socket.io + express进行实时消息推送

偏执的太偏执、 2023-07-18 02:58 3阅读 0赞

socket.io是一个websocket库，包含客户端的js和服务端的node.js，可以在不同浏览器和移动设备上构建实时应用。

一、安装 socket.io

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>npm install socket.io</code> </td> 
 </tr> 
 </tbody> 
</table>

二、通过socket.io创建一个简单应用

index.html的代码：

这样我们就可以在客户端建立与服务端的实时消息传送。注意 send() 方法只是 emit 方法的封装，等同于 emit('message', args)。

我们通过 emit 方法可以自定义的发送事件，并监听事件。

index.html的代码：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 </td> 
 <td> <code>&lt;!DOCTYPE html&gt;</code> <code>&lt;html lang=</code><code>"zh-CN"</code><code>&gt;</code> <code>&lt;head&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;meta charset=</code><code>"UTF-8"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;title&gt;Title&lt;/title&gt;</code> <code>&lt;/head&gt;</code> <code>&lt;body&gt;</code> <code>&lt;input type=</code><code>"text"</code>&nbsp;<code>id=</code><code>"msg"</code><code>&gt;</code> <code>&lt;input type=</code><code>"button"</code>&nbsp;<code>id=</code><code>"send"</code>&nbsp;<code>value=</code><code>"发送"</code><code>&gt;</code> <code>&lt;input type=</code><code>"button"</code>&nbsp;<code>id=</code><code>"event"</code>&nbsp;<code>value=</code><code>"发送自定义事件"</code><code>&gt;</code> <code>&lt;ul id=</code><code>"receive"</code><code>&gt;&lt;/ul&gt;</code> &nbsp; <code>&lt;!-- /socket.io/socket.io.js 这个引用路径是固定的，socket.io会自动帮我们解析 --&gt;</code> <code>&lt;script src=</code><code>"/socket.io/socket.io.js"</code><code>&gt;&lt;/script&gt;</code> <code>&lt;script&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>socket = io.connect(</code><code>'http://localhost:8888'</code><code>);</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//连接成功时触发</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>socket.on(</code><code>'connect'</code><code>,&nbsp;</code><code>function</code>&nbsp;<code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'连接成功'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//连接断开时触发</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>socket.on(</code><code>'disconnect'</code><code>,&nbsp;</code><code>function</code>&nbsp;<code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'连接断开'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//收到消息时触发</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>socket.on(</code><code>'message'</code><code>,&nbsp;</code><code>function</code>&nbsp;<code>(data) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>node = document.createElement(</code><code>"li"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>node.innerHTML =&nbsp;</code><code>"客户端收到 : "</code>&nbsp;<code>+ data;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.querySelector(</code><code>"#receive"</code><code>).appendChild(node);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.querySelector(</code><code>"#send"</code><code>).onclick =&nbsp;</code><code>function</code>&nbsp;<code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>msg = document.querySelector(</code><code>"#msg"</code><code>).value;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>socket.send(msg);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.querySelector(</code><code>"#event"</code><code>).onclick =&nbsp;</code><code>function</code>&nbsp;<code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>msg = document.querySelector(</code><code>"#msg"</code><code>).value;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//参数一表示，事件的名称</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//参数二表示，要发送的数据</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>socket.emit(</code><code>"myevent"</code><code>, msg);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code> <code>&lt;/script&gt;</code> <code>&lt;/body&gt;</code> <code>&lt;/html&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

emit() 或 send() 还有第三个参数，用来设置消息发送成功后的回执。

index.html的代码：

三、socket.io命名空间的概念

有些时候我们需要按不同的模块或功能去传递不同的消息，比如在 /user 模块下推送用户信息，在 /order 模块下推送订单信息，两者间互不干扰。

这个时候就需要用到命名空间了，socket.io把不同命名空间下的消息和事件分隔开了。

user.html的代码：

order.html的代码：

/user 和 /order 不同命名空间下的消息彼此之间无法看到。

四、socket.io房间的概念

房间是一个命名空间下划分的，一个客户端可以进入多个房间。

如果在命名空间下进行广播，那该命名空间下的所有客户端和房间内的客户端都会收到消息。

如果在房间内进行广播，则该房间下的所有客户端会收到消息，房间外的不会影响。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 </td> 
 <td> <code>const</code>&nbsp;<code>http =&nbsp;</code><code>require</code><code>(</code><code>'http'</code><code>);</code> <code>const</code>&nbsp;<code>path =&nbsp;</code><code>require</code><code>(</code><code>'path'</code><code>);</code> <code>const</code>&nbsp;<code>express =&nbsp;</code><code>require</code><code>(</code><code>'express'</code><code>);</code> <code>let app = express();</code> <code>let server = http.createServer(app);</code> <code>let io =&nbsp;</code><code>require</code><code>(</code><code>'socket.io'</code><code>)(server);</code> &nbsp; <code>app.</code><code>use</code><code>(express.</code><code>static</code><code>(path.join(__dirname)));</code> &nbsp; <code>app.get(</code><code>'/'</code><code>,&nbsp;</code><code>function</code>&nbsp;<code>(req, res) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>res.sendFile(path.join(__dirname,&nbsp;</code><code>'index.html'</code><code>));</code> <code>});</code> &nbsp; <code>io.of(</code><code>'/user'</code><code>).on(</code><code>'connection'</code><code>,&nbsp;</code><code>function</code>&nbsp;<code>(socket) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let rooms = [];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//加入房间</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>socket.on(</code><code>'join'</code><code>,&nbsp;</code><code>function</code>&nbsp;<code>(name) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>socket.join(name,&nbsp;</code><code>function</code>&nbsp;<code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(!rooms.includes(name)) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>rooms.unshift(name);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(`${socket.id} 加入房间 ${name}`);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(rooms);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//离开房间</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>socket.on(</code><code>'leave'</code><code>,&nbsp;</code><code>function</code>&nbsp;<code>(name) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>socket.leave(name,&nbsp;</code><code>function</code>&nbsp;<code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>rooms = rooms.filter(</code><code>function</code>&nbsp;<code>(value) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>value !== name;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(`${socket.id} 离开房间 ${name}`);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(rooms);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//房间内的广播</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>socket.on(</code><code>'room_broadcast'</code><code>,&nbsp;</code><code>function</code>&nbsp;<code>(data) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//socket.to(rooms[0]).send('房间 ${rooms[0]} 内的广播 : ' + data); 房间下的所有客户端，不包括发送者</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//io.of(命名空间).in(rooms[0]).send(`房间 ${rooms[0]} 内的广播 : ${data}`); 房间下的所有客户端，包括发送者</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>io.of(</code><code>'/user'</code><code>).in(rooms[0]).send(`房间 ${rooms[0]} 内的广播 : ${data}`);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//命名空间下的广播</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>socket.on(</code><code>'namespace_broadcast'</code><code>,&nbsp;</code><code>function</code>&nbsp;<code>(data) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//socket.broadcast.send('命名空间下的广播 : ' + data); 命名空间下所有客户端，不包括发送者</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//io.of(命名空间).send('命名空间下的广播 : ' + data); 命名空间下所有客户端，包括发送者</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>io.of(</code><code>'/user'</code><code>).send(</code><code>'命名空间下的广播 : '</code>&nbsp;<code>+ data);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>});</code> &nbsp; <code>io.of(</code><code>'/order'</code><code>).on(</code><code>'connection'</code><code>,&nbsp;</code><code>function</code>&nbsp;<code>(socket) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>socket.on(</code><code>'message'</code><code>,&nbsp;</code><code>function</code>&nbsp;<code>(data) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>io.of(</code><code>'/order'</code><code>).send(</code><code>'命名空间下的广播 : '</code>&nbsp;<code>+ data);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>});</code> &nbsp; <code>server.listen(8888);</code> </td> 
 </tr> 
 </tbody> 
</table>

user.html的代码：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 </td> 
 <td> <code>&lt;!DOCTYPE html&gt;</code> <code>&lt;html lang=</code><code>"en"</code><code>&gt;</code> <code>&lt;head&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;meta charset=</code><code>"UTF-8"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;title&gt;Title&lt;/title&gt;</code> <code>&lt;/head&gt;</code> <code>&lt;body&gt;</code> <code>&lt;input type=</code><code>"text"</code>&nbsp;<code>id=</code><code>"msg"</code><code>&gt;</code> <code>&lt;input type=</code><code>"button"</code>&nbsp;<code>id=</code><code>"room_send"</code>&nbsp;<code>value=</code><code>"房间内的广播"</code><code>&gt;</code> <code>&lt;input type=</code><code>"button"</code>&nbsp;<code>id=</code><code>"namespace_send"</code>&nbsp;<code>value=</code><code>"命名空间下的广播"</code><code>&gt;</code> <code>&lt;input type=</code><code>"button"</code>&nbsp;<code>class</code><code>=</code><code>"join"</code>&nbsp;<code>room=</code><code>"001"</code>&nbsp;<code>value=</code><code>"加入房间001"</code><code>&gt;</code> <code>&lt;input type=</code><code>"button"</code>&nbsp;<code>class</code><code>=</code><code>"join"</code>&nbsp;<code>room=</code><code>"002"</code>&nbsp;<code>value=</code><code>"加入房间002"</code><code>&gt;</code> <code>&lt;input type=</code><code>"button"</code>&nbsp;<code>class</code><code>=</code><code>"leave"</code>&nbsp;<code>room=</code><code>"001"</code>&nbsp;<code>value=</code><code>"离开房间001"</code><code>&gt;</code> <code>&lt;input type=</code><code>"button"</code>&nbsp;<code>class</code><code>=</code><code>"leave"</code>&nbsp;<code>room=</code><code>"002"</code>&nbsp;<code>value=</code><code>"离开房间002"</code><code>&gt;</code> <code>&lt;script src=</code><code>"/socket.io/socket.io.js"</code><code>&gt;&lt;/script&gt;</code> <code>&lt;script&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>socket = io.connect(</code><code>'http://localhost:8888/user'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>socket.on(</code><code>'connect'</code><code>,&nbsp;</code><code>function</code>&nbsp;<code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'连接成功'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>socket.on(</code><code>'message'</code><code>,&nbsp;</code><code>function</code>&nbsp;<code>(data) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'客户端收到 : '</code><code>, data);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.querySelector(</code><code>"#room_send"</code><code>).onclick =&nbsp;</code><code>function</code>&nbsp;<code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>msg = document.querySelector(</code><code>"#msg"</code><code>).value;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>socket.emit(</code><code>"room_broadcast"</code><code>, msg);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.querySelector(</code><code>"#namespace_send"</code><code>).onclick =&nbsp;</code><code>function</code>&nbsp;<code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>msg = document.querySelector(</code><code>"#msg"</code><code>).value;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>socket.emit(</code><code>"namespace_broadcast"</code><code>, msg);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>joins = document.querySelectorAll(</code><code>".join"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>for</code>&nbsp;<code>(</code><code>var</code>&nbsp;<code>ix = 0; ix &lt; joins.length; ix++) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>joins[ix].onclick =&nbsp;</code><code>function</code>&nbsp;<code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>socket.emit(</code><code>'join'</code><code>, this.getAttribute(</code><code>"room"</code><code>));</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>leaves = document.querySelectorAll(</code><code>".leave"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>for</code>&nbsp;<code>(</code><code>var</code>&nbsp;<code>ix = 0; ix &lt; leaves.length; ix++) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>leaves[ix].onclick =&nbsp;</code><code>function</code>&nbsp;<code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>socket.emit(</code><code>'leave'</code><code>, this.getAttribute(</code><code>"room"</code><code>));</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&lt;/script&gt;</code> <code>&lt;/body&gt;</code> <code>&lt;/html&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

通过 join() 和 leave() 加入房间或离开房间。通过 to() 方法指定向哪个房间发送消息。要发送多个房间，可以调用多次 to()。