使用socket.io进入迷人的Websocket世界
#网络开发人员 #react #node #websocket

使用nodejs和reactjs学习Websocket

什么时候使用它，何时不使用它，还有一些陷阱。

WebSocket是一项使我们能够实时交换Web服务器和客户端之间的数据。

WebSockets是一项引人入胜的技术；每个Web开发人员至少应该对其有基本的理解。

今天，我们将了解Websockets。我们还将学习如何使用nodejs应用程序中的socket.io实现简单的Websocket服务器。

让我们开始！

什么是Websockets？

简单地说，这是一个协议。 HTTP也是协议。但区别在于HTTP请求是单向的，但是Websocket是双向的。

其他一些特征是

  • WebSockets使用单个TCP连接。

  • WebSocket连接持续。

  • 通常比HTTP连接更有效。

Websockets如何工作？

WebSocket连接在两个步骤中工作

1.握手

客户端将HTTP请求发送到服务器，如果服务器同意建立WebSocket连接，则握手已完成。

2.交流

建立连接后，双方都可以来回发送数据。

那么什么时候使用Websocket？

很高兴您问； WebSocket Technology提供了比传统HTTP请求的几个好处，包括：

您需要实时数据交换

如果您要建立小组聊天或股票市场应用，则Websocket是您最好的选择。

您关心潜伏期：

如果延迟是您最大的关注（也许您是在构建多人游戏），那么Websocket是您的理想之选。

提高效率：

使用单个TCP连接，WebSocket连接比传统的HTTP请求更有效。

您应该对何时使用Websockets有一个好主意。让我们在演示应用程序中实现它。

如何在nodejs中使用websockets

在nodejs中，我们使用一个称为Socket.io的功能强大的库来创建WebSocket服务器。

今天，我们将在nodejs中构建一个简单的Websocket服务器，并从ReactJS应用程序与之通信。

让我们开始。

socket.io如何工作？

socket.io是一个库，可以通过Web启用服务器和客户端之间的实时双向通信。这是socket.io服务器和客户端如何通信的简要概述：

  1. socket.io服务器开始收听特定端口上的传入客户端连接。

  2. 当客户端要连接到服务器时，它将带有必要连接信息的服务器发送请求。

  3. 服务器收到连接请求后，它将与客户端建立Websocket连接。如果Websocket不可用，则服务器将使用其他后备方法，例如长期投票。

  4. 建立了Websocket连接后，服务器和客户端可以实时发送数据。数据是作为事件发送的，可以是携带任何数据的自定义消息。

  5. 服务器和客户端都可以发出事件以将数据发送给另一方并聆听事件接收数据。

  6. socket.io库处理基础通信协议详细信息，例如消息编码/解码，连接管理和后备机制。

socket.io通过建立Websocket连接，在双方之间的数据发送事件，并使用socket.io库来管理连接详细信息，从而实现服务器和客户端之间的实时双向通信。

设置服务器

让我们从基本的Express应用程序开始。希望您已经有一个；否则，您可以使用以下样板。

    git clone https://github.com/Mohammad-Faisal/express-typescript-skeleton-boilerplate

现在，首先，在我们的Express项目中安装socket.io软件包。

    yarn add socket.io

然后打开index.ts文件，我们的服务器root，然后添加以下代码。

import express, { Application, Request, Response } from "express";
import bodyParser from "body-parser";
import http from "http";
import { Server } from "socket.io";

const PORT = 4000;

// Create an express applicaiton
const app: Application = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// Create a Socket.io server with the express application
const server = http.createServer(app);
const io = new Server(server);

// wait for new connection
io.on("connection", (socket) => {
  console.log("New client is connected");

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

// Run the server
try {
  server.listen(PORT, (): void => {
    console.log(`Connected successfully on port ${PORT}`);
  });
} catch (error: any) {
  console.error(`Error occurred: ${error.message}`);
}

因此，使用此代码，

  • 我们正在使用Express App创建服务器。

  • 我们正在创建一个新的socket.io服务器实例。

  • 我们正在等待任何想要与应用程序连接并显示消息的客户端。

  • 并开始在端口4000

    • 上聆听

我们已经完成了服务器。让我们转到客户端应用程序。

设置客户端：

让我们创建一个样板React应用程序，

    yarn create react-app --template typescript

现在安装对您的React应用程序的以下依赖关系。这是与socket.io服务器通信所需的socket.io客户端。

    yarn add socket.io-client

然后在组件顶部初始化客户端。

import io from "socket.io-client";

const socket = io("http://localhost:4000");

上面的代码将尝试通过传递的URL建立Websocket连接。

不幸的是，您会看到控制台上的CORS错误。这是因为我们不允许我们的JavaScript（React S）与服务器通信。

所以让我们回到服务器代码并更新套接字IO配置以避免CORS问题。

const io = new Server(server, {
  cors: {
    origin: "*",
  },
});

在这里，我们允许使用所有JavaScript起源。

显然对安全性不利；仅在生产中启用您的预期URL。

重新启动服务器后，您的CORS错误将消失。

现在，如果您在服务器端刷新您的React应用程序，您将看到甜蜜的消息，

新客户端已连接

让客户和服务器之间有一些通信。

发布活动

如前所述，我们可以从socket.io服务器发出事件，所有订阅该事件的客户端都将被通知。

让我们创建一个伪造的端点，一旦命中，它将发出一些消息。将以下代码添加到您的服务器。

app.get(
  "/test-message",
  async (req: Request, res: Response): Promise<Response> => {
    // notice here
    io.emit("message", "Hello World!");

    return res.status(200).send({
      message: "message emitted",
    });
  }
);

这是一个简单的获取终点。如果有人打了它，将发出事件。

如果您仔细观察，您会发现我们正在调用带有两个参数的io.emit。

消息 - >是事件名称。

你好世界 - >这是事件有效载荷。

所以现在，所有观看此事件的客户都将收到此更新。

要测试它，让我们让我们的React应用程序订阅消息事件。

订阅活动

现在在组件中，添加以下代码。

useEffect(() => {
  socket.on("message", (message) => {
    console.log("received a new message from the server", message);
  });
}, []);

在这里，我们通过socket.on（）方法订阅了消息事件。因此，每当我们的服务器发出消息事件时，我们的客户端都会收到通知。

测试它

现在继续击中http://localhost:4000/test-message并查看客户端控制台。

client receives a message

因此，现在我们可以了解Websocket的功能。它可以根据需要通知尽可能多的客户。

客户到服务器通信

现在，我们还可以将消息从客户端发送到服务器。可以说，在单击按钮时，我们想向服务器发送消息并查看。

在我们的React组件中添加一个按钮和一个单击处理程序。

const sendMessage = (event: any) => {
  event.preventDefault();

  socket.emit("client-message", "This is from client");
};

return (
  <div>
    <button onClick={sendMessage}>Send message to server</button>
  </div>
);

您可以看到，上述功能可以发出事件。就像以前的服务器一样，我们可以在服务器端收听此事件。

io.on("connection", (socket) => {
  socket.on("client-message", (msg) => {
    console.log("message: " + msg);
  });
});

单击按钮时，我们将看到消息到达服务器。

Server receives a message

现在我们有了一个双向通信系统，我们可以在许多方面使用。

有些事情，很高兴知道

使用WebSocket设计大型系统时，您需要有一些重要的注意事项。

交货保证

当您将消息从服​​务器发送到客户端时，保证将交付。

最多一次

但是，如果您将消息从客户端发送到服务器，则有所不同。保证您的消息可以传递。

至少一次

因此进行相应的设计并计划失败。

消息的顺序。

无论如何，将按顺序接收消息。

例如，以下事件，

socket.emit("event1");
socket.emit("event2");
socket.emit("event3");

在上面的示例中，另一侧将始终以相同的顺序接收事件。

什么时候不使用Websocket？

技术界没有银子弹。一切都是权衡的。

，您应该在将Websockets的限制介绍到您的体系结构之前。

这是Webocket的一些最重要的局限性：

浏览器支持：

虽然所有现代浏览器都支持Websocket，但较旧的浏览器可能不会。如果您必须支持各种浏览器，这可能是一个问题。

防火墙问题：

WebSocket使用与HTTP不同的协议；一些防火墙可能会阻止WebSockets流量。对于阻止WebSockets的防火墙后面的用户来说，这可能是一个问题。

连接开销：

WebSockets需要客户和服务器之间的专用连接，这可以增加开销并增加服务器上的负载。

可伸缩性：

WebSocket可能是资源密集型的，并且可能需要为许多客户的应用程序进行更好的扩展。

安全问题：

WebSocket可能容易受到跨站点脚本（XSS）和跨站点请求伪造（CSRF）等攻击的攻击。<​​/p>

与现有基础架构的兼容性：

WebSockets可能需要更好地与现有基础架构（例如负载平衡器，代理服务器和内容交付网络（CDN））一起工作。

结论

今天，我尽力介绍Websockets和socket.io。

我希望您今天学到了一些新东西。祝您有美好的一天！

Github repo：

想连接吗？

您可以通过LinkedIn或Read more on my website

与我联系