随着互联网的发展，即时通讯系统已经成为一种了不起的沟通手段。而 Socket.io 是一款强大的开源库，可以实现很多基于 Web 端的实时通信应用。在本文章中，我们将会展示如何使用 Socket.io 实现一个基本的 Web 即时聊天系统，展示其全流程和细节。
前置条件
在我们开始本例之前，请确认您已经具备基础的 Web 编程技能，包括 JavaScript 和 HTML 的基础知识。并且，您需要在本地或 Web 服务器上安装 Node.js 和 NPM。
安装 Socket.io
首先，我们需要安装有关套接字的 Node.js 模块，也就是 Socket.io。打开终端并输入以下命令即可：
npm install socket.io
一旦安装完成，您就可以引用它了。在项目根目录下创建一个新文件夹，名为 socket_chat，并使用以下命令创建 package.json 文件：
npm init
接下来，您要运行以下命令来安装 Express.js 库：
npm install express --save
用 Express.js 可以很容易地实现一个 Web 应用程序。接下来，我们需要编辑 package.json 文件，以便将我们的 main.js 文件定义为我们的程序的主要执行脚本：
"scripts": {
"start": "node main.js"
}创建服务器
接下来，我们将创建一个简单的 Node.js 服务器。在 socket_chat 文件夹中创建文件 main.js。
首先，导入我们需要的库：
const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);这里，我们导入了 Express.js 库来创建我们的 Web 应用程序。而 http 模块则是 Node.js 内置的模块，用于创建 HTTP 服务器。通过 io 变量，我们可以创建可用于处理套接字连接的实例。
接下来，我们要使用 Express.js 生成静态文件。您可以将一个名为index.html 的静态页面放到 public 目录中，然后通过以下代码启用它：
app.use(express.static(__dirname + '/public'));
接下来，定义 socket 事件：
io.on('connection', (socket) => {
console.log('user connected');
socket.on('disconnect', () => {
console.log('user disconnected');
});
});最后，我们将应用程序绑定到端口：
http.listen(3000, () => {
console.log('listening on *:3000');
});现在，运行 main.js 文件并访问 http://localhost:3000，您将看到您的 index.html 页面。同时，您注意到在控制台中输出了“听 *：3000”这条消息。
实现聊天功能
现在，我们将使用 Socket.io 来实现基本的聊天功能。
首先，请修改 index.html 文件以包含聊天界面。我们要添加一个用于显示聊天消息的 ul 元素，还添加了一个用于显示消息发送者的 input 元素和一个用于发送消息的 button 元素。并添加一个用于输入昵称的 input 元素，实现用户的自定义昵称。
-- -------------------- ---- -------
------
--- -------------------
---- ----------------
------ ------------- ----------- -----------------
------ ------------ ----------- -----------------
------- -------------------------------
------
------- ---------------------------------------
------- --------------------------------------------------------
------- --------------------------
-------接下来，在 main.js 中添加以下代码：
-- -------------------- ---- -------
------------------- -------- -- -
----------------- ------------
----------------------- -- -- -
----------------- ---------------
---
--------------- --------- ------------- ----------
--------------------- - - -----
------------- --------- ---- ----------
---
---这段代码告诉我们当一个套接字连接到服务器时，我们要监听所有的 chat message 事件，并在其发生时向所有连接的套接字发送消息。
接下来，我们要在客户端使用 Socket.io 处理消息。在 main.js 文件中添加以下代码：
-- -------------------- ---- -------
---------------------------- -
-- --- --------- ---
--- ------ - -------------
-- -------
--- ------------- - ---------------
--------------- --------- ------------- --------- -
-- ------------
--------------------------------------------- - -- - - ------
---
-- ---------
----------------------------------- -
-- ---------------
--- ------------ - --------------
--- ------- - -------------------
--- -------- - --------------------
-- ----
----------------- --------- -------- ----------
-- -------
---------------------
---
---这段代码在加载时将连接到 Socket.io 服务器，并在每次接收到服务器发送的 chat message 事件时向我们的聊天框添加消息和昵称。
最后，我们使用以下命令启动服务器：
npm start
在浏览器中转到 http://localhost:3000 即可开始聊天。
结论
到这里，我们已经展示了如何使用 Socket.io 来实现一个基本的 Web 即时聊天系统。诸如此类的实时通信应用程序可以用于很多场景。如果您有更多需要了解，可以去它的官方网站寻找更多文档和示例。
该教程的完整代码请参见：Socket.io 实现即时聊天系统的详细教程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6752e34b8bd460d3ad997c16