WebSockets简介

WebSocket是Web应用程序中HTTP通信的替代方法。它们在客户端和服务器之间提供了长期的双向通信通道。了解如何使用它们执行网络交互

WebSocket是Web应用程序中HTTP通信的替代方法。

它们在客户端和服务器之间提供了长期的双向通信通道。

建立通道后,通道将保持开放状态,从而提供非常快速的连接,且延迟时间和开销均较低。

浏览器对WebSocket的支持

所有现代浏览器都支持WebSocket。

Browser support for WebSockets

WebSockets与HTTP有何不同

HTTP是一个非常不同的协议,也是一种不同的通信方式。

HTTP是一个请求/响应协议:服务器在客户端请求时返回一些数据。

使用WebSockets:

  • 服务器可以向客户端发送消息没有客户明确要求的东西
  • 客户端和服务器可以同时互相交谈
  • 很少的数据开销需要进行交换以发送消息。这意味着低延迟通信

Web套接字非常适合即时的长寿的通讯。

HTTP非常适合偶尔的数据交换以及客户发起的互动。

HTTP更简单实现,而WebSocket则需要更多的开销。

安全的WebSockets

始终对WebSocket使用安全的加密协议,wss://

ws://指的是不安全的WebSockets版本(http://WebSockets),并且出于明显的原因应避免使用。

创建一个新的WebSockets连接

const url = 'wss://myserver.com/something'
const connection = new WebSocket(url)

connection是一个WebSocket目的。

成功建立连接后,open事件被触发。

通过将回调函数分配给onopen的属性connection目的:

connection.onopen = () => {
  //...
}

如果有任何错误,onerror函数回调被触发:

connection.onerror = (error) => {
  console.log(`WebSocket error: ${error}`)
}

使用WebSockets将数据发送到服务器

打开连接后,您可以将数据发送到服务器。

您可以在内部方便地进行操作onopen回调函数:

connection.onopen = () => {
  connection.send('hey')
}

使用WebSocket从服务器接收数据

使用回调函数进行监听onmessage,当message收到事件:

connection.onmessage = (e) => {
  console.log(e.data)
}

在Node.js中实现服务器

ws是一个流行的WebSockets库Node.js

我们将使用它来构建WebSockets服务器。它还可以用于实现客户端,并使用WebSocket在两个后端服务之间进行通信。

使用安装npm

npm init
npm install ws

您需要编写的代码很少:

const WebSocket = require('ws')

const wss = new WebSocket.Server({ port: 8080 })

wss.on(‘connection’, (ws) => { ws.on(‘message’, (message) => { console.log(Received message =&gt; </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">message</span><span style="color:#e6db74">}</span><span style="color:#e6db74">) }) ws.send(‘ho!’) })

这段代码在端口8080(WebSockets的默认端口)上创建了一个新服务器,并在建立连接时添加了一个回调函数,发送ho!发送给客户端,并记录其收到的消息。

查看有关Glitch的实时示例

这是一个WebSockets服务器的实时示例:https://glitch.com/edit/#!/flavio-websockets-server-example

这是一个与服务器交互的WebSockets客户端:https://glitch.com/edit/#!/flavio-websockets-client-example

调试WebSocket

Chrome和Firefox提供了一种方便的方法来可视化通过WebSockets发送的所有信息。他们对DevTools的支持一直在提高。撰写本文时,Firefox具有最有用,最有用的调试工具。

在这两种方法中,您都可以查看“网络”面板,然后选择WS以仅过滤WebSockets连接。

我拍摄了以下这些Firefox(开发人员版)的屏幕截图:

Firefox headers

Firefox detail

Firefox DevTools可以做的比我展示的要多得多。在我用来测试的示例中,我只是发送一个字符串,但是您可以检查以更有条理的方式发送的任何数据:

Data in Firefox

退房Mozilla Hacks上的这篇文章进一步了解如何使用此工具。

这是Chrome的屏幕截图,希望可以很快改进其WebSockets调试工具:

Chrome


更多网络教程: