简介
无论你是在建立一个聊天应用程序,一个视频共享应用程序,甚至是一个视频会议应用程序,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.