web网关接在什么位置_Web套接字网关，用于开发实时应用-CSDN博客

web网关接在什么位置

If you are new to Web Socket or if you are wondering what Web Sockets are, stick around, else you can dive right into the Integration of Web Socket with React section.

如果您不熟悉Web套接字，或者想知道什么是Web套接字，请坚持学习，否则您可以直接进入“将Web套接字与React集成”部分。

The history of Web Socket is out of scope for this article, but its definition holds valuable meaning. The web socket technology allows a two-way communication between two computers over a single TCP. Simplistically put, it is a good way of handling transfer of high-scale data between a server and clients connected to it. Now you might wonder, “how is it different than a traditional request to get data from server?”. The beauty of this technology is, the client does not need to send a GET request every-time an event occurs, the server sends the response to its connected clients automatically, thus avoiding long-polling.

Web Socket的历史不在本文讨论范围之内，但其定义具有宝贵的意义。 Web套接字技术允许通过单个TCP在两台计算机之间进行双向通信。简单地说，这是处理服务器与连接的客户端之间的大规模数据传输的一种好方法。现在您可能会想，“与从服务器获取数据的传统请求有何不同？”。该技术的优点在于，客户端不需要在每次事件发生时都发送GET请求，服务器会自动将响应发送到其连接的客户端，从而避免了长时间轮询。

使用Socket.IO在带有Express的Node.js中进行Web套接字设置 (Web Socket Setup In Node.js with Express using Socket.IO)

Among many web socket libraries out there, the most popular web sockets currently developers love to use are Socket.IO, ws, sockjs and websocket node. For the sake of this article and to keep things simple, I will use Socket.IO package in Node.js

在许多Web套接字库中，当前开发人员喜欢使用的最流行的Web套接字是Socket.IO，ws，sockjs和websocket节点。 为了本文的简洁起见，我将在Node.js中使用Socket.IO包。

Consisting of a Node.js server and a Javascript client library, socket.io provides reliability for handling proxies and load balancers as well as personal firewall and antivirus software and even supports binary streaming. Used by Microsoft, Zendesk and Trello, it even provides real time analytics and can be used for a wide verity of use cases from simple chats to IOT (internet of things).

socket.io由Node.js服务器和Javascript客户端库组成，可为处理代理和负载平衡器以及个人防火墙和防病毒软件提供可靠性，甚至支持二进制流。它被Microsoft，Zendesk和Trello所使用，甚至可以提供实时分析，并且可以用于从简单聊天到IOT(物联网)的各种使用案例。

The “introduction” to the library could be quite a mouthful, so if you don’t understand some of it, no problem, MOVE ON!

对该库的“介绍”可能很冗长，因此，如果您不了解其中的某些内容，没问题，那就继续吧！

设置 (The Setup)

The basic setup for any web socket is that they need to be running on both the server side to listen for any connection as well as on the client side to establish a connection with the server. Socket.io client will be used in the front-end and socket.io server will be used in the back-end.

任何Web套接字的基本设置是它们都需要在服务器端运行以侦听任何连接 ，也需要在客户端运行以建立与服务器的连接 。 Socket.io客户端将在前端使用，而socket.io服务器将在后端使用。

服务器端： (Server Side:)

Spin up your server-api and “require” socket.io after you required ‘express’. The order here does not matter, it is there so you can visualize where I am requiring it. Once you have done that, having the server listen for any incoming connection is simply a walk-in-the-park.

在您需要“表达”之后，启动您的server-api并“需要” socket.io。这里的顺序无关紧要，它在那里，因此您可以可视化我需要的位置。完成此操作后，让服务器侦听任何传入的连接就很简单。

At this point, the server is doing nothing except console logging when a client gets connected. But we can have this web socket perform additional tasks on multiple connection.

在这一点上，当客户端连接时，服务器除了控制台日志外什么也不做。但是我们可以让这个Web套接字在多个连接上执行其他任务。

To understand the basic logic behind handling a simple client connection, let our client (from the client side) emit an event called “chat”. Upon receiving this event from the client, the server would send the data it received to all the clients connected to it.

为了理解处理简单的客户端连接背后的基本逻辑，让我们的客户端(从客户端)发出一个称为“聊天”的事件。从客户端接收到此事件后，服务器会将接收到的数据发送到与其连接的所有客户端。

That was fairly simple, so, let’s do something a little bit different. Let’s assume three clients, namely A, B and C are connected to our chat server. Now we want to show ‘A is typing a message” to B and C but not to A; when client A is typing a message. We can achieve that using the following code.

那很简单，所以让我们做一些不同的事情。假设三个客户端(即A，B和C)已连接到我们的聊天服务器。现在我们要向B和C显示“ A正在输入消息”，而不是A。当客户端A输入消息时。我们可以使用以下代码来实现。

That’s about it. Our server side socket.io setup is complete. At the end of your setup, the code should look like this:

就是这样我们的服务器端socket.io设置已完成。在安装结束时，代码应如下所示：

客户端： (Client Side:)

It is a good reminder that you can use socket.io client with any framework for the front-end, but in our case, we will be using React as our front-end framework.

很好的提醒您可以将socket.io客户端与任何用于前端的框架一起使用，但是在我们的情况下，我们将使用React作为我们的前端框架。

After creating the react app using npx create-react-app, npm install socket.io-client to get the client side of the library. Once that is done, you need to require it.

使用npx create-react-app创建react应用程序后，npm install s ocket.io-client获取库的客户端。完成后，您需要进行此操作。

On the client side, listening to events are done with socket.on and to turn-off listening, simply use socket.off. It should be noted that this particular code is being written on the Chatroom component. The function registerHandler will be used later to register a onMessageReceived callback to update the component’s state and hence, display a new message when received.

在客户端，监听事件是通过socket.on完成的，要关闭监听，只需使用socket.off即可 。应该注意的是，这个特定的代码正在写在Chatroom组件上。稍后将使用函数registerHandler来注册onMessageReceived回调以更新组件的状态，并因此在接收到时显示新消息。

With the socket.emit, we can have any custom event be emitted from the client side that the server listens to. Through the second argument, we can pass the actual data. Also, a request-response type relation can be concocted by passing a callback as the third argument. This callback can be used to listen to any response coming from the server after the client has emitted an event. In the above screenshot, the register function emits the event called ‘register’ with name as the data and the cb as the callback.

使用socket.emit，我们可以从服务器侦听的客户端发出任何自定义事件。通过第二个参数，我们可以传递实际数据。同样，可以通过将回调作为第三个参数来构建请求-响应类型关系。客户端发出事件后，此回调可用于侦听来自服务器的任何响应。在上面的屏幕截图中， register函数发出名为'register'的事件，名称为data， cb为callback 。

自网套接字实现与第三方API (Self-Web Socket implementation vs Third Party API)

Now that we have our basics of web sockets out of the way, I guess the real question is…Do we implement our own web socket or should we simply integrate the functionality to a third-party API and let them take the hassle? is such a company that would do the heavy lifting for you while you can concentrate on building your app.

现在我们已经了解了Web套接字的基础知识，我想真正的问题是……我们是实现自己的Web套接字，还是应该将功能简单地集成到第三方API中并让他们避免麻烦？这样的公司将为您提供繁重的工作，同时您可以专注于构建应用程序。

Well, it kind of depends. For scenario A, imagine, you are building a chatroom for your clan, the Black Ninja, which by the way has 4 members. The sole purpose of your clan’s app is to have a chatting UI so that each member can be in constant communication with each other and that’s about it.

好吧，这取决于。设想对于场景A，您正在为您的氏族Black Ninja建立一个聊天室，该聊天室有4个成员。氏族应用程序的唯一目的是拥有一个聊天UI，以便每个成员都可以一直与之保持联系。

Now, for scenario B, imagine you are in charge of making a food delivery and pick-up app for a group of restaurants in a specific area, where one of the core functionalities would be to maintain real-time communication with the driver who will be delivering the food from the restaurant to the customer. To make this app faster and efficient, you chose your front-end to be React, which therefore implies that you have do complex state-managements.

现在，对于场景B，假设您负责为特定区域内的一组餐馆制作食品交付和提取应用程序，其中核心功能之一就是与驾驶员保持实时沟通。将食物从餐厅运送到顾客。为了使这个应用程序更快，更高效，您选择了前端作为React，这意味着您要执行复杂的状态管理。

Scenario B is obviously more complex than A because it has got more business logic and possibly ginormous amount of code to maintain. Hence, it would be sensible to use a third party API, such as Pusher to do all the heavy liftings of a web socket, leaving you more time to concentrate on other core features of the app.

方案B显然比A复杂，因为它具有更多的业务逻辑和可能需要维护的大量代码。因此，明智的方法是使用第三方API(例如Pusher)来完成Web套接字的所有繁重工作，从而使您有更多时间专注于应用程序的其他核心功能。

结论 (Conclusion)

Web sockets are definitely some cool add-ons for your application but their implementation can become cumbersome when they are required to do more job than handling some simple chat, and hence, in such cases, it is wiser to delegate that part of your app’s feature to some third party API if you are not willing to walk that extra mile.

Web套接字绝对是您的应用程序的一些不错的附加组件，但是当要求它们执行比简单的聊天处理更多的工作时，Web套接字的实现可能会变得很麻烦，因此，在这种情况下，最好委派应用程序功能的这一部分如果您不愿意再走那么远，可以使用一些第三方API。