随着互联网的发展，即时通讯逐渐成为了各行各业的必备工具。在前端领域，WebSocket 和 Socket.io 已经成为了常用的即时通讯解决方案。本篇文章将为大家介绍如何基于 WebSocket 和 Socket.io 依托一个简单的 Web 应用来实现即时通讯功能。
什么是 WebSocket？
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。在 WebSocket API 中，浏览器和服务器之间只需要协商一次，然后就可以在浏览器和服务器之间保持长久的双向通讯。这种通讯机制使得 WebSocket 成为了实时性要求较高的应用程序的首选方案。
什么是 Socket.io？
Socket.io 是基于 WebSocket 封装的一种实时通讯库，它可以在客户端和服务器之间建立双向的实时通讯通道。如果浏览器没有支持 WebSocket，它可以自动降级使用其他实时通讯技术，比如 Long Polling。同时，Socket.io 还提供了更多的功能来方便开发人员构建实时应用程序。
使用 Socket.io 构建一个简单的即时聊天室
接下来，我们将演示如何使用 WebSocket 和 Socket.io 来构建一个简单的即时聊天室。
步骤一：准备工作
首先，我们需要在本地或者远程服务器上安装最新版本的 Node.js 和 NPM。
在安装完成后，可以通过如下命令来创建一个新的 Node.js 项目：
npm init
在创建项目时我们需要提供一些信息，比如项目名称、版本号、作者等。
然后，我们需要在项目根目录下创建一个名为 index.js 的文件，这个文件将会是我们的服务器端代码。
步骤二：安装和初始化 Socket.io
在项目根目录下执行下面的命令来安装 Socket.io：
npm i --save socket.io
安装成功后，我们需要在 index.js 文件中初始化 Socket.io：
-- -------------------- ---- -------
-- -- ---------
----- -- - ---------------------------
-- -------
------------------- -------- -- -
-------------- ---- ------------
-- ----------
--------------- --------- ----- -- -
--------------------- - - -----
-- -------------------
--------------------------- --------- -----
---
-- ---------
----------------------- -- -- -
----------------- ---------------
---
---在上面的代码中，我们通过 require('socket.io')(3000) 来初始化 Socket.io，并将其监听在本地 3000 端口上。
在客户端连接成功后，我们通过 io.on('connection', (socket) => {...}); 监听客户端连接事件，并向控制台输出一条日志。
接着，我们监听客户端发送的 chat message 事件，并将消息发送给除了发送者之外的其他客户端。当客户端断开连接时，我们也会输出一条日志。
步骤三：创建 HTML 页面
接下来，我们需要在项目根目录下创建一个名为 index.html 的文件，该文件将会是我们的客户端代码。
我们需要引入 Socket.io 客户端的脚本：
<script src="/socket.io/socket.io.js"></script>
然后，我们在 HTML 页面中添加一个简单的表单，用于发送消息：
<body>
<ul id="messages"></ul>
<form id="chat-form">
<input id="message-input" autocomplete="off" />
<button type="submit">Send</button>
</form>
</body>步骤四：使用 Socket.io 客户端代码
在 HTML 页面中添加以下 JavaScript 代码：
-- -------------------- ---- ------- ----- ------ - ----- -- -------- ---- ------- -- --------------- --------- ----- -- - ----- -- - ----------------------------- -------------- - ---- ---------------------------------------------------- --- -- -------- --------------------------------------------------------------- --- -- - ------------------- -- ----------- ----- --- - ----------------------------------------------- ----------------- --------- ----- -- ----- ---------------------------------------------- - --- ---
在上面的代码中，我们首先使用 io() 函数来创建一个 Socket.io 客户端实例，并连接到服务器。
接着，我们监听服务端发送的 chat message 事件，并将消息渲染到页面上。在表单提交事件中，我们获取用户输入的消息并通过 socket.emit 发送给服务端，并将输入框清空。
步骤五：运行代码
我们可以通过如下命令来运行 Node.js 项目：
node index.js
然后，我们可以打开浏览器并访问 http://localhost:3000 来查看聊天室的效果：
总结
本文介绍了如何基于 WebSocket 和 Socket.io 来构建一个简单的即时通讯应用。我们使用了 Node.js 和 NPM 来初始化项目，并在服务器端使用 Socket.io 来监听客户端连接事件，处理客户端发送的消息，并将消息发送给其他客户端。
在客户端，我们引入了 Socket.io 客户端脚本，并使用 JavaScript 代码监听服务端发送的消息，并将消息渲染到页面上。同时，我们也通过表单来允许用户发送消息。
Socket.io 提供了更多的功能来方便开发人员构建实时应用程序，比如使用房间来管理客户端，实现多人聊天等。通过熟悉 Socket.io 的 API，我们可以在实际应用中快速开发出高效、稳定的即时通讯应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a9296548841e9894571cb0