与Web套接字建立连接

得益于技术,过去数月要跨大洋传输的数据现在可以在几秒钟内获得。 作为这些数据的使用者,人们越来越依赖于立即访问可靠的信息。 WebSockets是前端程序可以连接并接收最新信息的一种方式。

在正常的AJAX请求中,连接或对话必须由浏览器启动。 服务器无法启动此对话。 AJAX请求完成后,连接关闭。 可以通过使浏览器连续向服务器询问数据来模拟实时通信,但这效率低下。

文档指出,WebSockets是“用于连接到WebSocket服务器,然后在该连接上发送和接收数据的主要接口。”简单来说,WebSocket打开从浏览器到服务器的连接,在收到响应后该连接保持打开状态。 服务器或浏览器可以启动双向通信。 这将创建真正的实时Web应用程序。

好消息! 浏览器内置了WebSocket,创建此连接仅需几行代码。 要访问内置库,请在JavaScript文件中创建一个变量,以标识新的WebSocket连接。

例:

让ws = new WebSocket(’ws:// localhost:3001’)

ws.send(’Message’)将信息发送到后端。

ws.addEventListener(’message’,function(event){

{事件是一个对象,数据作为其实际上包含消息的属性之一}

})

就是这样……这是前端开始连接所需的全部代码! 要在浏览器中调试WebSocket连接,网络面板内部有一个过滤器“ WS”。 HTTP请求中没有框架选项卡,该选项卡显示了来回通信的表。

要创建相应的服务器来处理WebSocket请求,需要花费更多的代码行,但是这样做仍然相对简单。

使用Node.js,通过键入npm install来安装WebSocket模块-在命令行中保存ws。

还有其他可用的工具,例如Socket.io,但是此示例使用普通的WebSockets。

在后端创建WebSocket服务器的示例代码:

const WebSocket = require(’ws’)

const WebSocketServer = WebSocket.Server;

const端口= 3001;

const ws = new WebSocketServer({

端口:端口

});

重要的是要注意,这不会替换正在使用的任何其他服务器; 它仅用于WebSocket连接。 还必须注意,WebSocket应用程序不能与运行HTTP服务器的端口相同。 在此示例中,WebSocket服务器在端口3001上列出,而我使用Node.js构建的服务器在端口3000上进行侦听。创建应用程序时,都需要这两个服务器。

WebSockets是发送短消息的理想选择。 HTTP请求可能仍将更适合大型文件,元数据等。

与WebSocket的连接可以称为“客户端”。 要收听尝试连接的客户端,请使用ws.on:

ws.on(’connection’,function(socket){

console.log(’建立客户端连接’);

messages.forEach(function(msg){

socket.send(msg);

});

socket.on(’message’,function(data){

console.log(’收到的消息:’+数据);

ws.client.forEach(function(clientSocket){

clientSocket.send(data);

});

socket.send(data);

});

函数内部的信息是服务器如何响应客户端消息。 在此示例中,服务器console.log记录新客户端已连接的消息。 套接字是从WebSocket服务器接收回的对象(类似于HTTP请求中接收的数据)。 对于收到的新消息,服务器将这些消息发送到每个连接的客户端。

可以访问套接字的任何客户端或应用程序都可以使用socket.send发送信息。 多个前端可以一次连接到WebSocket,类似于一个主电源盒具有多根电线。 Node.js非常适合处理所有这些连接。 由于范围的原因,套接字函数位于ws.on函数内部。 套接字功能特定于所连接的特定客户端,每个“ ws.on”表示一个不同的连接。

要将消息发送到所有连接,代码如下所示:

ws.sockets.forEach(socket => {

client.send(’嘿’)

}

为了测试这一点,有一个命令行实用程序可让您模拟浏览器连接,类似于对HTTP请求使用Postman。

npm install -g wscat

命令行:wscat -c ws:// localhost:3001

出去那里并建立联系!