多人在线聊天室是一个非常常见的需求，无论是在社交应用还是在游戏中都具有广泛的应用。而 socket.io 是一个非常好用的实现多人在线聊天室的库，它实现了 WebSocket 和轮询两种通信方式，能够很好地兼容各种浏览器和设备。
本文将详细介绍如何使用 socket.io 实现一个多人在线聊天室，包括前端和后端两部分，涉及到的技术栈包括 Node.js, Express, socket.io 和 Vue.js。
1. 后端
首先需要在后端搭建一个能够接收和发送消息的 WebSocket 服务器，并提供一些接口供前端调用。
1.1 安装依赖
使用 Node.js 和 Express 搭建后端服务器，需要安装以下依赖：
npm install express http socket.io
1.2 创建 Express 应用
在项目根目录下，创建一个名为 server.js 的文件，使用以下代码初始化一个 Express 应用：
const express = require('express');
const app = express();
const http = require('http').createServer(app);
http.listen(3000, () => {
console.log('listening on *:3000');
});以上代码创建了一个 Express 应用，并启动了一个监听端口为 3000 的 HTTP 服务器。
1.3 集成 socket.io
接下来，需要集成 socket.io，使得服务器可以接收和发送 WebSocket 消息。可以通过以下代码实现：
const io = require('socket.io')(http);
io.on('connection', (socket) => {
console.log('a user has connected');
socket.on('disconnect', () => {
console.log('a user has disconnected');
});
});以上代码初始化了一个 socket.io 对象，并在 connection 事件中处理新的连接。当有用户连接时，服务器将打印一条 a user has connected 的消息，并在用户断开连接时打印 a user has disconnected 的消息。
1.4 处理聊天消息
当用户发送消息时，服务器需要将消息广播给其他所有用户。可以通过以下代码实现：
-- -------------------- ---- -------
------------------- -------- -- -
-------------- ---- --- ------------
----------------------- -- -- -
-------------- ---- --- ---------------
---
--------------- --------- ----- -- -
--------------------- - - -----
------------- --------- -----
---
---以上代码增加了一个 chat message 事件，当用户发送消息时，服务器将打印消息内容，并通过 io.emit 方法将消息广播给其他所有用户。
1.5 添加路由
最后需要为服务器添加一些接口，用于在前端页面上接收和发送消息。可以通过以下代码在 Express 应用中添加路由：
-- -------------------- ---- ------- ---------------------------------- ------------ ----- ---- -- - ---------------------- - --------------- --- ----------------- ----- ---- -- - ----- ------- - ----------------- ------------- --------- --------- --------------- ---
以上代码添加了三个路由，其中 / 路由返回了一个 index.html 页面，用于展示聊天室界面；/send POST 接口用于处理前端发送的消息。
2. 前端
在前端页面中，需要连接到后端的 WebSocket 服务器，并实现一个简单的聊天窗口和发送消息功能。
2.1 创建 Vue.js 应用
在项目根目录下，创建一个名为 index.html 的文件，并在其中初始化一个 Vue.js 应用。可以通过以下代码实现：
-- -------------------- ---- -------
--------- -----
------
------
---------------- ---- -----------
------- ---------------------------------------
------- ------------------------------------------------------------
-------
------
---- ---------
------------- ---- --------
------
--------
--- -----
--- -------
----- ---
-------- ---
---
---------
-------
-------以上代码使用了 Vue.js 2.x 版本，并在页面顶部引入了 socket.io 和 Vue.js 库。
2.2 连接 WebSocket 服务器
接下来，可以在 Vue.js 应用中添加一个 mounted 钩子函数，用于连接到后端 WebSocket 服务器。可以通过以下代码实现：
-- -------------------- ---- -------
--- -----
--- -------
----- -
--------- ---
-------- ---
--
--------- -
----- ------ - -----
--------------- --------- ----- -- -
------------------------
---
--
-------- -
------------- -
------------------- - -------- ------------ --
-------- -- -
------------ - ---
--
------------ -- -
-------------------
---
--
--
---以上代码通过 const socket = io() 创建了一个socket.io 对象，使用 socket.on 方法监听了 chat message 事件，并在事件回调中将消息添加到 messages 数组中。
2.3 实现聊天窗口
可以通过以下代码实现一个简单的聊天窗口：
<div id="app">
<h1>Socket.io Chat App</h1>
<ul>
<li v-for="msg in messages">{{ msg }}</li>
</ul>
<input type="text" v-model="message" @keyup.enter="sendMessage">
<button @click="sendMessage">Send</button>
</div>以上代码使用了 Vue.js 的模板语法，通过 v-for 指令循环遍历 messages 数组，并将每个元素显示在一个 <li> 标签中。
2.4 实现发送消息功能
可以通过以下代码实现发送消息的功能：
-- -------------------- ---- -------
-------- -
------------- -
------------------- - -------- ------------ --
-------- -- -
------------ - ---
--
------------ -- -
-------------------
---
--
--以上代码通过 axios 库发送了一个 POST 请求，将消息内容发送到后端服务器。
总结
本文详细介绍了如何使用 socket.io 实现一个多人在线聊天室，包括搭建后端 WebSocket 服务器和实现前端聊天窗口和发送消息功能。socket.io 提供了非常简单易用的 API，使得实现多人在线聊天室变得异常简单，既支持 WebSocket 通信方式，也支持轮询，可以兼容各种浏览器和设备。Socket.io 贴近实际开发需求的功能和 API，颇具学习价值的内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652113d795b1f8cacd88821f