FE - Third-party library - Socket.io-优快云博客

本文链接：https://blog.youkuaiyun.com/zhuanghuajun/article/details/139454204

Socket.io 中文网

介绍

Socket.IO 是一个基于 Node.js 的库,提供了实时、双向和基于事件的通信。它抽象了 WebSocket 和其他实时技术,并提供了 API,使实时通信变得容易。

在本教程中,将构建一个简单的实时聊天应用程序,了解 Socket.IO 的基本概念和使用方法。

步骤 #1：项目初始化

首先,需要创建一个新的 Node.js 项目,并安装 Socket.IO:

创建一个新文件夹,并在终端中进入该文件夹。
运行 npm init -y 初始化 package.json 文件。
运行 npm install socket.io 安装 Socket.IO 库。

步骤 #2：服务 HTML

使用 Express 来提供 HTML 页面。创建一个名为 index.js 的文件,并添加以下代码:

const express = require('express');
const app = express();
const http = require('http').createServer(app);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

http.listen(3000, () => {
  console.log('listening on *:3000');
});

接下来,创建一个 index.html 文件,并添加以下 HTML 代码:

<!DOCTYPE html>
<html>
<head>
  <title>Socket.IO Chat</title>
  <style>
    body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
    #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
    #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
    #input:focus { outline: none; }
    #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
    #messages { list-style-type: none; margin: 0; padding: 0; }
    #messages > li { padding: 0.5rem 1rem; }
    #messages > li:nth-child(odd) { background: #efefef; }
  </style>
</head>
<body>
  <ul id="messages"></ul>
  <form id="form" action="">
    <input id="input" autocomplete="off" /><button>Send</button>
  </form>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    // 客户端 JavaScript 代码将在此处添加
  </script>
</body>
</html>

这个 HTML 文件定义了一个简单的聊天界面,包括消息列表和一个输入框。最后,引入了 Socket.IO 的客户端 JavaScript 库。

步骤 #3：集成 Socket.IO

Now,需要在服务器端集成 Socket.IO。修改 index.js 文件,如下所示:

const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

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

http.listen(3000, () => {
  console.log('listening on *:3000');
});

使用 require(‘socket.io’)(http) 将其与 Express 服务器集成。还添加了一个 connection 事件监听器,当有新的客户端连接时会被触发。

步骤 #4：触发事件

Next,需要添加 message 事件,让客户端能够发送消息。修改 index.js 文件:

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

  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
  });
});

在客户端 JavaScript 中,需要监听表单的提交事件,并发送 chat message 事件:

const socket = io();

$('form').submit(function(e) {
  e.preventDefault(); // 防止表单默认提交
  socket.emit('chat message', $('#input').val());
  $('#input').val('');
  return false;
});

步骤 #5：广播

现在,需要将接收到的消息广播给所有连接的客户端。修改 index.js 文件:

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

  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });
});

在客户端 JavaScript 中,需要监听 chat message 事件,并将消息添加到消息列表中:

socket.on('chat message', (msg) => {
  $('#messages').append($('<li>').text(msg));
});

API 概述

Socket.IO 提供了以下主要 API:

io.on(‘connection’, callback): 监听客户端连接事件。
socket.on(eventName, callback): 监听特定事件。
socket.emit(eventName, data): 触发特定事件。
io.emit(eventName, data): 向所有客户端广播事件。
socket.broadcast.emit(eventName, data): 向除了自己之外的所有客户端广播事件。

处理断开连接

当客户端断开连接时,需要执行一些清理操作。修改 index.js 文件:

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

  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });

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

步骤 #6: 连接状态恢复

为了在客户端断开连接后恢复连接状态,可以使用 Socket.IO 的持久化功能，通过启用持久化, Socket.IO 会在客户端断开连接时保存连接状态,并在客户端重新连接时自动恢复这些状态。

const io = require('socket.io')(server, {
  serveClient: false,
  // other options
});

serveClient: false 关闭了 Socket.IO 自带的客户端库的服务,这样可以更好地控制客户端的加载方式。

Socket.IO 提供了一个名为 adapter 的配置选项,用于指定连接状态的持久化机制。默认情况下,Socket.IO 使用内存存储,这对于小型应用程序来说是足够的。但是,对于需要水平扩展的大型应用程序,需要使用诸如 Redis 或 MongoDB 之类的外部存储服务。

const redisAdapter = require('socket.io-redis');
io.adapter(redisAdapter({ host: 'localhost', port: 6379 }));

使用了 socket.io-redis 适配器,可以将连接状态存储在 Redis 中。你也可以选择其他的适配器,如 socket.io-mongodb 适配器。

通过以上配置,当客户端断开连接后,Socket.IO 会自动将连接状态保存在外部存储服务中。当客户端重新连接时,Socket.IO 会自动从存储服务中恢复之前的连接状态,确保应用程序的连续性和用户体验的流畅性。

步骤 #7: 服务器交付

为了部署服务器,可以使用诸如 PM2 或 systemd 之类的进程管理工具。
在生产环境中,建议使用 HTTPS 来保护你的应用程序。可以使用 Let’s Encrypt 等免费的 SSL 证书提供商。

步骤 #8: 客户端交付

在客户端,你可以使用 Socket.IO 的客户端库来连接到服务器

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();
  socket.on('connect', () => {
    console.log('Connected to the server');
  });
  socket.on('chat message', (msg) => {
    console.log('Received message:', msg);
  });
  socket.emit('chat message', 'Hello, server!');
</script>

步骤 #9: 水平缩放

为了支持水平缩放,需要使用一个外部的消息队列服务,如 Redis 或 RabbitMQ。
在每个 Socket.IO 服务器实例上,需要配置一个 Socket.IO 适配器,以便在服务器之间交换消息。
这样,当一个客户端连接到其中一个服务器时,其他服务器实例也能够接收到相关的事件和消息。
请添加图片描述