WebSocket 是一种全双工通信协议，它使得客户端和服务器之间可以实时地进行双向通信，而无需经过 HTTP 请求和响应的过程。在前端开发中，WebSocket 经常被用来实现实时聊天、实时数据更新等功能。而在 Node.js 中，我们可以使用 Socket.Io 库来方便地实现 WebSocket 相关的功能。本文将介绍如何使用 Socket.Io 和 Node.js 实现 6 大 WebSocket 扩展功能。
1. 实现实时聊天室
实时聊天室是 WebSocket 最常见的应用之一。使用 Socket.Io 和 Node.js 实现实时聊天室非常简单。我们可以先创建一个 Express 应用，然后在其中引入 Socket.Io 库，代码如下：
const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);接着，我们可以监听客户端的连接事件，当客户端连接成功后，向客户端发送一个欢迎消息，并将其加入到一个聊天室中：
io.on('connection', (socket) => {
console.log('a user connected');
socket.emit('welcome', 'Welcome to the chat room!');
socket.join('chat-room');
});然后，我们就可以监听客户端发送的消息，并把消息广播到聊天室中的所有用户：
-- -------------------- ---- -------
------------------- -------- -- -
-------------- ---- ------------
---------------------- -------- -- --- ---- --------
-------------------------
--------------- --------- ----- -- -
----------------------------- --------- -----
---
---最后，我们可以在前端页面上添加一个输入框和一个按钮，通过按钮点击事件向服务器发送消息：
<input id="message-input" type="text" /> <button id="send-button">Send</button>
-- -------------------- ---- ------- ----- ------ - ----- ----- ------------ - ----------------------------------------- ----- ---------- - --------------------------------------- ------------------------------------ -- -- - ----- ------- - ------------------- ----------------- --------- --------- ------------------ - --- ---
2. 实现在线用户列表
在线用户列表是聊天室功能的一个重要补充，它可以让用户看到当前聊天室中有哪些用户在线。使用 Socket.Io 和 Node.js 实现在线用户列表也非常简单。我们可以在服务器端记录每个用户的用户名和 socket.id，然后在客户端监听连接和断开事件，更新在线用户列表：
-- -------------------- ---- -------
----- ----------- - ---
------------------- -------- -- -
-------------- ---- ------------
------------------ ---------- -- -
---------------------- - ---------
------------- ------ ----------------------------
---
----------------------- -- -- -
------ -----------------------
------------- ------ ----------------------------
---
---在前端页面上，我们可以添加一个用户列表的元素，然后通过监听服务器发送的 user list 事件，更新在线用户列表：
<ul id="user-list"></ul>
-- -------------------- ---- -------
----- ------ - -----
----- -------- - -------------------------------------
--------------- ------ ------- -- -
------------------ - ---
-------------------- -- -
----- -- - -----------------------------
-------------- - -----
-------------------------
---
---3. 实现私聊功能
私聊功能可以让用户在聊天室中与指定的用户进行私密对话。使用 Socket.Io 和 Node.js 实现私聊功能也非常简单。我们可以在服务器端监听客户端发送的私聊消息，然后将消息发送给指定的用户：
-- -------------------- ---- -------
------------------- -------- -- -
-------------- ---- ------------
------------------ --------- -- --- ------- -- -- -
----- ------------ - ---------------------------------
---- ---------- -- -------- --- --
--
-- -------------- -
------------------------------------ --------- -
----- -----------------------
--------
---
- ---- -
-------------------- ----- ----- -- --- ----------
-
---
---在前端页面上，我们可以添加一个私聊功能的对话框，然后通过监听服务器发送的 private message 事件，更新对话框中的内容：
<div id="private-chat"></div>
const socket = io();
const privateChat = document.getElementById('private-chat');
socket.on('private message', ({ from, message }) => {
const p = document.createElement('p');
p.textContent = `${from}: ${message}`;
privateChat.appendChild(p);
});4. 实现在线状态监测
在线状态监测可以让用户知道指定的用户是否在线。使用 Socket.Io 和 Node.js 实现在线状态监测也非常简单。我们可以在服务器端监听客户端发送的在线状态监测请求，然后返回指定用户的在线状态：
-- -------------------- ---- -------
------------------- -------- -- -
-------------- ---- ------------
---------------- -------- ---------- -- -
----- ------------ - ---------------------------------
---- --- -- - --- --------
--
-- -------------- -
------------------- -------- - --------- ------- ---- ---
- ---- -
------------------- -------- - --------- ------- ----- ---
-
---
---在前端页面上，我们可以添加一个在线状态监测的输入框和按钮，然后通过按钮点击事件向服务器发送在线状态监测请求：
<input id="username-input" type="text" /> <button id="check-button">Check Online</button> <div id="online-status"></div>
-- -------------------- ---- -------
----- ------ - -----
----- ------------- - ------------------------------------------
----- ----------- - ----------------------------------------
----- ------------ - -----------------------------------------
------------------------------------- -- -- -
----- -------- - --------------------
------------------ -------- ----------
---
----------------- -------- -- --------- ------ -- -- -
-- -------- -
------------------------ - ------------ -- --------
- ---- -
------------------------ - ------------ -- ---------
-
---5. 实现断线重连功能
断线重连功能可以让用户在网络断开或重新连接后自动重新连接到聊天室。使用 Socket.Io 和 Node.js 实现断线重连功能也非常简单。我们可以在客户端添加一个断线重连的事件监听器，然后在服务器端监听客户端的断线重连事件：
-- -------------------- ---- ------- ----- ------ - ----- -------------------- -- -- - ------------------------- --- ----------------------- -- -- - ---------------------------- --- ---------------------- -- -- - --------------------------- ---
-- -------------------- ---- -------
------------------- -------- -- -
-------------- ---- ------------
----------------------- -- -- -
----------------- ---------------
---
---------------------- -- -- -
----------------- --------------
---
---6. 实现消息历史记录
消息历史记录可以让用户查看之前发送的消息。使用 Socket.Io 和 Node.js 实现消息历史记录也非常简单。我们可以在服务器端记录每个用户发送的消息，然后在客户端向服务器发送请求，获取消息历史记录：
-- -------------------- ---- -------
----- -------- - ---
------------------- -------- -- -
-------------- ---- ------------
--------------- --------- ----- -- -
--------------- ----- ----------------------- -------- --- ---
----------------------------- --------- -----
---
------------------ --------- -- -- -
---------------------- ----------
---
---在前端页面上，我们可以添加一个获取消息历史记录的按钮，然后通过按钮点击事件向服务器发送请求：
<button id="history-button">Get History</button> <div id="history"></div>
-- -------------------- ---- -------
----- ------ - -----
----- ------------- - ------------------------------------------
----- ------- - -----------------------------------
--------------------------------------- -- -- -
-------------------- ----------
---
-------------------- ---------- -- -
----------------- - ---
------------------- ----- ------- -- -- -
----- - - ----------------------------
------------- - --------- ------------
-----------------------
---
---以上就是使用 Socket.Io 和 Node.js 实现 6 大 WebSocket 扩展功能的详细指南。通过这些示例代码，相信读者已经掌握了如何使用 Socket.Io 和 Node.js 实现各种 WebSocket 相关的功能。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d97a45a941bf713411dc2f