简介
无论你是在建立一个聊天应用程序，一个视频共享应用程序，甚至是一个视频会议应用程序，Socket.io在你的客户端之间提供一个连接，允许他们之间闪电般的数据传输。
它由客户端和服务器端组成，服务器端负责处理不同的连接和信息散布。你应该知道，Socket.io不是WebSocket，而是建立在其他实时协议上的自定义实时传输协议实现。
本文介绍了Socket.io的基础知识，从设置连接到将你的客户端与服务器端相连。
什么是WebSocket？
WebSocket是一种网络通信协议，一旦它们之间建立了一个通道，就可以从客户端向服务器端（以及从服务器端向客户端）传输数据。这种连接一直持续到通道被终止。与HTTPS协议不同，WebSocket允许双向的数据传输。
WebSocket可用于建立任何东西，从实时交易应用到聊天应用，或几乎任何需要高效、实时数据传输的东西。
什么是套接字和Socket.io？
套接字是在网络中的特定点之间实现的连接。套接字中的连接一旦创建就会持续存在，直到它被终止。套接字连接可以是服务器到客户端，客户端到服务器，或者两个客户端或服务器之间。
Socket.io是一个JavaScript库，其工作原理与WebSockets类似。数据传输是通过一个开放的连接完成的，允许实时数据交换。每个连接，也被称为套接字，由两部分组成。服务器端和客户端。Socket.io利用Engine.io来实现服务器端与Engine.io-client的客户端连接。
Socket.io中的数据传输大多是以JSON（JavaScript对象符号）的形式完成的，所以我们将在本文中使用JSON格式。
安装和设置
由于Socket.io需要服务器端和客户端来实现连接，我们将从服务器端开始为两者（服务器和客户端）进行安装，然后再转移到客户端。
服务器端
确保你的系统中已经安装了Node.js和node包管理器（npm）。如果没有，请进入Node.js网站，了解更多关于安装的信息。
在你的命令行中，运行以下命令。
npm install express Socket.io
复制代码这将安装必要的依赖性。
下一步是设置我们的服务器。继续在你的index.js文件中要求Socket.io、Express和HTTP模块，如下所示。我们将使用HTTP模块来创建我们的服务器，而不是Express，以便将我们的服务器轻松传递给Socket.io。
const express = require("express");
const http = require("http");
const socketio = require("socket.io");
const app = express();
const PORT = process.env.PORT || 5000;
const server = http.createServer(app);
io = socketio(server);
server.listen(PORT, () => {
console.log(`server running at port ${PORT}`);
});
复制代码如上所示，我们成功创建了我们的服务器。我们可以通过运行以下程序来启动我们的服务器。
node index.js
复制代码我们的服务器应该在5000端口启动和运行。注意，我们的服务器被传递给了Socket.io。
客户端
对于客户端的设置，让我们把Socket.io脚本导入我们的index.html文件中。
<script src="/socket.io/socket.io.js"></script>
复制代码继续连接你的客户端和服务器端，如下图所示。
=let ENDPOINT = "http://localhost:5000"
let socket = io.connect(ENDPOINT);
=
复制代码或者，如果你使用React，你可以为你的客户端安装socket.io-client 。
npm install socket.io-client
复制代码然后你可以像这样继续导入并创建一个连接。
import React from "react";
import io from "socket.io-client";
let ENDPOINT = "http://localhost:5000"
let socket = io(ENDPOINT);
复制代码Socket连接和断开连接
我们已经成功地设置了我们的服务器端和客户端。现在，一旦客户端连接上了，我们就会在服务器端收到这个连接的通知。Socket.io帮助我们这样处理这个连接。
io.on("connection", (socket) => {
// your code snippet
})
复制代码这个事件，配备了一个回调函数，当连接发生时被触发。
对于更复杂的应用程序，你可能想为不同的用户群创建特定的房间。这个功能可以使用Socket.io轻松实现。一旦实现了连接，你可以使用加入方法加入特定的房间。
io.on("connection", (socket) => {
let roomID = 2436
socket.join(roomID)
})
复制代码一旦发生断开连接，就会触发断开事件。
io.on("connection", (socket) => {
socket.on("disconnect", () => {
});
})
复制代码事件发射和广播
Socket.io允许用户发射事件并在另一端监听它们。事件发射可以发生在服务器端和客户端。例如，在连接过程中，一个 "加入 "事件可以在客户端发出。
socket.emit("join", { name: “peter paul”}, (err) => {
if (err) {
alert(err);
}
});
复制代码请注意，该事件与JSON形式的有效载荷一起发出，其中包含当前加入连接的用户名称。
继续在服务器端处理这个事件。
socket.on("join", ({ name }, callback) => {
if (error) {
callback(error);
} else {
let roomID = 2436
socket.join(roomID)
console.log(name)
});
复制代码在事件处理过程中，你也可以选择向特定房间的所有人广播信息。
socket.on("join", ({ name }, callback) => {
if (error) {
callback(error);
}
else {
let roomID = 2436
socket.join(roomID)
socket.broadcast.to(roomID).emit("adminMessage", {
name: "admin",
content: `${name} has joined`,
});
}
});
复制代码我们所有的服务器端代码在这一点上应该是这样的。
const express = require("express");
const http = require("http");
const socketio = require("socket.io");
const app = express();
const PORT = process.env.PORT || 5000;
const server = http.createServer(app);
io = socketio(server);
io.on("connection", (socket) => {
socket.on("join", ({ name }, callback) => {
if (error) {
callback(error);
} else {
let roomID = 2436
socket.join(roomID)
console.log(name)
socket.broadcast.to(roomID).emit("adminMessage", {
name: "admin",
content: `${name} has joined`,
});
});
socket.on("disconnect", () => {
});
})
server.listen(PORT, () => {
console.log(`server running at port ${PORT}`);
});
复制代码客户端的结构应该是这样的。
let ENDPOINT = "http://localhost:5000"
let socket = io.connect(ENDPOINT);
socket.emit("join", { name: “peter paul”}, (err) => {
if (err) {
alert(err);
}
});
复制代码调试和记录
Socket.io自带了一个非常强大的调试工具，叫做Debug。在引入Debug之前，Socket.io采用了将所有东西记录到控制台的方式，大多数用户认为这很烦人。后来，他们采取了一个新的步骤，默认不记录任何东西。
你可以在使用浏览器时通过提供Debug环境变量或localStorage.debug 属性来选择查看这些信息。
对于控制台来说，它的做法如下所示。
DEBUG=* node yourfile.js
复制代码* 可以帮助你看到哪些信息是可用的。
对于浏览器来说，它是这样做的。
localStorage.debug = '*';
复制代码结论
Socket.io，以其所有的简单性，已经成为开发者在构建需要实时数据传输的应用程序时的首要选择。随着几乎所有现代浏览器都支持WebSocket，Socket.io有望变得更大。
现在你已经掌握了Socket.io的基础知识，我建议你在一个与上述概念相同的不同项目上工作，以磨练你的技能，并对该主题有更清晰的认识。
The postReal-time data transfer with Socket.ioappeared first onLogRocket Blog.