使用 Socket.Io 和 Node.js 实现 6 大 Websocket 扩展功能

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');
});

然后，我们就可以监听客户端发送的消息，并把消息广播到聊天室中的所有用户：

// www.javascriptcn.com code example
io.on('connection', (socket) => {
  console.log('a user connected');
  socket.emit('welcome', 'Welcome to the chat room!');
  socket.join('chat-room');

  socket.on('chat message', (msg) => {
    io.to('chat-room').emit('chat message', msg);
  });
});

最后，我们可以在前端页面上添加一个输入框和一个按钮，通过按钮点击事件向服务器发送消息：

<input id="message-input" type="text" />
<button id="send-button">Send</button>

// www.javascriptcn.com code example
const socket = io();
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');

sendButton.addEventListener('click', () => {
  const message = messageInput.value;
  socket.emit('chat message', message);
  messageInput.value = '';
});

2. 实现在线用户列表

在线用户列表是聊天室功能的一个重要补充，它可以让用户看到当前聊天室中有哪些用户在线。使用 Socket.Io 和 Node.js 实现在线用户列表也非常简单。我们可以在服务器端记录每个用户的用户名和 socket.id，然后在客户端监听连接和断开事件，更新在线用户列表：

// www.javascriptcn.com code example
const onlineUsers = {};

io.on('connection', (socket) => {
  console.log('a user connected');

  socket.on('login', (username) => {
    onlineUsers[socket.id] = username;
    io.emit('user list', Object.values(onlineUsers));
  });

  socket.on('disconnect', () => {
    delete onlineUsers[socket.id];
    io.emit('user list', Object.values(onlineUsers));
  });
});

在前端页面上，我们可以添加一个用户列表的元素，然后通过监听服务器发送的 user list 事件，更新在线用户列表：

<ul id="user-list"></ul>

// www.javascriptcn.com code example
const socket = io();
const userList = document.getElementById('user-list');

socket.on('user list', (users) => {
  userList.innerHTML = '';
  users.forEach((user) => {
    const li = document.createElement('li');
    li.textContent = user;
    userList.appendChild(li);
  });
});

3. 实现私聊功能

私聊功能可以让用户在聊天室中与指定的用户进行私密对话。使用 Socket.Io 和 Node.js 实现私聊功能也非常简单。我们可以在服务器端监听客户端发送的私聊消息，然后将消息发送给指定的用户：

// www.javascriptcn.com code example
io.on('connection', (socket) => {
  console.log('a user connected');

  socket.on('private message', ({ to, message }) => {
    const targetSocket = Object.entries(onlineUsers).find(
      ([_, username]) => username === to
    );

    if (targetSocket) {
      io.to(targetSocket[0]).emit('private message', {
        from: onlineUsers[socket.id],
        message,
      });
    } else {
      socket.emit('error', `User ${to} is not online!`);
    }
  });
});

在前端页面上，我们可以添加一个私聊功能的对话框，然后通过监听服务器发送的 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 实现在线状态监测也非常简单。我们可以在服务器端监听客户端发送的在线状态监测请求，然后返回指定用户的在线状态：

// www.javascriptcn.com code example
io.on('connection', (socket) => {
  console.log('a user connected');

  socket.on('check online', (username) => {
    const targetSocket = Object.entries(onlineUsers).find(
      ([_, u]) => u === username
    );

    if (targetSocket) {
      socket.emit('online status', { username, online: true });
    } else {
      socket.emit('online status', { username, online: false });
    }
  });
});

在前端页面上，我们可以添加一个在线状态监测的输入框和按钮，然后通过按钮点击事件向服务器发送在线状态监测请求：

<input id="username-input" type="text" />
<button id="check-button">Check Online</button>
<div id="online-status"></div>

// www.javascriptcn.com code example
const socket = io();
const usernameInput = document.getElementById('username-input');
const checkButton = document.getElementById('check-button');
const onlineStatus = document.getElementById('online-status');

checkButton.addEventListener('click', () => {
  const username = usernameInput.value;
  socket.emit('check online', username);
});

socket.on('online status', ({ username, online }) => {
  if (online) {
    onlineStatus.textContent = `${username} is online`;
  } else {
    onlineStatus.textContent = `${username} is offline`;
  }
});

5. 实现断线重连功能

断线重连功能可以让用户在网络断开或重新连接后自动重新连接到聊天室。使用 Socket.Io 和 Node.js 实现断线重连功能也非常简单。我们可以在客户端添加一个断线重连的事件监听器，然后在服务器端监听客户端的断线重连事件：

// www.javascriptcn.com code example
const socket = io();

socket.on('connect', () => {
  console.log('connected');
});

socket.on('disconnect', () => {
  console.log('disconnected');
});

socket.on('reconnect', () => {
  console.log('reconnected');
});

// www.javascriptcn.com code example
io.on('connection', (socket) => {
  console.log('a user connected');

  socket.on('disconnect', () => {
    console.log('user disconnected');
  });

  socket.on('reconnect', () => {
    console.log('user reconnected');
  });
});

6. 实现消息历史记录

消息历史记录可以让用户查看之前发送的消息。使用 Socket.Io 和 Node.js 实现消息历史记录也非常简单。我们可以在服务器端记录每个用户发送的消息，然后在客户端向服务器发送请求，获取消息历史记录：

// www.javascriptcn.com code example
const messages = [];

io.on('connection', (socket) => {
  console.log('a user connected');

  socket.on('chat message', (msg) => {
    messages.push({ from: onlineUsers[socket.id], message: msg });
    io.to('chat-room').emit('chat message', msg);
  });

  socket.on('request history', () => {
    socket.emit('history', messages);
  });
});

在前端页面上，我们可以添加一个获取消息历史记录的按钮，然后通过按钮点击事件向服务器发送请求：

<button id="history-button">Get History</button>
<div id="history"></div>

// www.javascriptcn.com code example
const socket = io();
const historyButton = document.getElementById('history-button');
const history = document.getElementById('history');

historyButton.addEventListener('click', () => {
  socket.emit('request history');
});

socket.on('history', (messages) => {
  history.innerHTML = '';
  messages.forEach(({ from, message }) => {
    const p = document.createElement('p');
    p.textContent = `${from}: ${message}`;
    history.appendChild(p);
  });
});

以上就是使用 Socket.Io 和 Node.js 实现 6 大 WebSocket 扩展功能的详细指南。通过这些示例代码，相信读者已经掌握了如何使用 Socket.Io 和 Node.js 实现各种 WebSocket 相关的功能。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d97a45a941bf713411dc2f