简介
本教程介绍如何使用 Socket.io 实现一个实时聊天室。Socket.io 是一个基于 Node.js 的实时应用程序框架，它可以在客户端和服务器端之间实现双向通信。使用 Socket.io，可以轻松地创建实时聊天室、游戏、交互应用等。
在本教程中，我们将使用 Express 和 Socket.io 创建一个简单的实时聊天室。我们会涵盖以下内容：
- 安装和启动 Express 和 Socket.io
- 在服务器端设置 Socket.io
- 在客户端设置 Socket.io
- 实现实时聊天功能
环境准备
在开始之前，请确保已经安装了以下软件：
- Node.js
- NPM 或 Yarn
安装和启动 Express 和 Socket.io
首先，我们需要安装 Express 和 Socket.io。打开终端并执行以下命令：
npm install express socket.io
或者如果你使用 Yarn，则执行以下命令：
yarn add express socket.io
安装成功后，我们可以创建一个新的 Express 项目。在终端中，执行以下命令：
express my-chat-app cd my-chat-app npm install
这样就创建了一个名为 my-chat-app 的新项目。
接下来，我们需要启动服务器。在 app.js 文件中添加以下代码：
const express = require('express');
const app = express();
// 启动服务器
const server = app.listen(3000, () => {
console.log('服务器已启动，监听端口号为 3000');
});现在，我们已经成功启动了 Express 服务器。
在服务器端设置 Socket.io
接下来，我们需要在服务器端设置 Socket.io。在 app.js 文件的底部添加以下代码：
-- -------------------- ---- -------
----- -- - -----------------------------
------------------- -------- -- -
--------------------------
----------------------- -- -- -
--------------------------
---
---这段代码会在客户端连接到服务器时触发 connection 事件，并在服务端打印一条信息以告知我们已经有新的用户连接。
同时，我们还监听了 disconnect 事件，在客户端断开连接时触发一条消息来告诉我们他们已经离开。
在客户端设置 Socket.io
现在，我们需要在客户端设置 Socket.io。
在 index.html 文件中添加以下代码：
-- -------------------- ---- -------
--------- -----
------
------
--------------------
-------
------
------- ---------------------------------------
--------
----- ------ - -----
-------------------- -- -- -
------------------------
---
----------------------- -- -- -
--------------------------
---
---------
-------
-------这里我们通过调用 io() 方法来创建一个新的 Socket.io 连接。
我们还监听了 connect 和 disconnect 事件来告知用户何时连接或断开连接。
实现实时聊天功能
现在，我们已经创建了一个新的 Express 项目，启动了服务器并创建了 Socket.io 连接。接下来，我们将实现我们的实时聊天功能。
首先，我们需要创建一个聊天室的输入框和发送按钮，在 index.html 文件的 <body> 标签里添加以下代码：
<div>
<input type="text" id="message"/>
<button id="send">发送</button>
</div>然后在 index.html 文件底部添加以下代码：
-- -------------------- ---- -------
----- ------------ - -----------------------------------
----- ---------- - --------------------------------
----- -------- - -------------------------------------
------------------------------------ -- -- -
----- ------- - -------------------
------------------------- ---------
---
----------------------- --------- -- -
----- -- - -----------------------------
------------ - --------
-------------------------
---这段代码会在用户点击发送按钮时触发 newMessage 事件，并将输入框中的文本作为参数传递给服务器。服务器收到新消息后会广播给所有连接的客户端。
同时，我们还监听了 newMessage 事件，当有新消息时将消息内容添加到页面的聊天室列表中。
现在，我们已经成功创建了一个基于 Socket.io 的实时聊天室！
总结
在本教程中，我们学习了如何使用 Express 和 Socket.io 创建一个简单的实时聊天室。我们涵盖了安装和启动 Express 和 Socket.io、在服务器端设置 Socket.io、在客户端设置 Socket.io、实现实时聊天功能等方面。希望这篇文章对大家有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648ae87248841e9894937557