在JavaScript中使用WebSockets进行实时通信

在JavaScript中使用WebSockets进行实时通信是一种在客户端和服务器之间建立持久性连接、实现全双工通信的技术。WebSocket 协议通过一个单一的长期连接，允许发送消息的双方向流动性，这使得数据可以快速并且实时地传递，大大提升了通信效率。对于需要实时数据更新的应用，如在线游戏、即时聊天和财经数据服务，它是一个不可或缺的解决方案。

在WebSocket 协议中，通信过程以 HTTP 请求作为前置握手，然后升级到 WebSocket 连接，这个过程涉及客户端发送升级请求头，服务器响应升级后的协议，在成功建立 WebSocket 连接之后，客户端和服务器就可以通过这个全双工通道自由地发送和接收消息。一旦通信开始，WebSocket服务器可以主动推送消息给客户端，这是传统HTTP请求所无法实现的。

一、WEB SOCKET 介绍与基础

WebSocket 协议概述

WebSocket 是一种网络通信协议，RFC 6455 定义了它的技术标准。它专为提供在单个 TCP 连接上的全双工通讯管道而设计。与传统的 HTTP(S) 请求不同，WebSocket 在客户端与服务器之间提供了一个持久的连接，并允许双方进行数据传输，而无需每次发送请求。

如何工作与优势

WebSocket 通信从客户端发起一个 HTTP 请求开始，该请求称为"握手"。在这个握手过程中，客户端和服务器之间通过 HTTP 协议交换信息，包括一个特殊的 Upgrade 头信息，用于请求服务器切换到 WebSocket 协议。服务器接收到这个请求后，如果同意升级协议，则返回一个状态码 101 Switching Protocols 的响应，至此，握手完成，WebSocket连接建立。

WebSocket 连接所带来的主要优势有：

减少通信延迟：一旦 WebSocket 连接建立，消息可以快速地在客户端和服务器之间传递，无需每次交换 HTTP 头部信息。
降低服务器负载：减少了前后端对消息传递的频繁确认，服务器处理请求的效率更高。
保持连接状态：与 HTTP 的无状态不同，WebSocket 允许维持连接状态，对于构建实时通信应用特别有利。
支持扩展协议：WebSocket 还可以支持各种子协议，满足高级的数据通信需求。

二、WEB SOCKET 连接的建立

建立连接的步骤

在JavaScript中建立 WebSocket 连接是一个简单且直接的过程。首先必须创建一个新的 WebSocket 对象，并将 WebSocket 服务端的URL作为参数传入。一旦对象创建成功，客户端会尝试与该URL指定的服务器进行连接。

代码实现与示例

下面是一个简单的代码片段，展示了如何在JavaScript中启动一个 WebSocket 连接：

const socket = new WebSocket('wss://www.example.com/socketserver');
socket.onopen = function(event) {
    // 当 WebSocket 创建成功时，会触发 onopen 事件
    console.log('WebSocket connection established.', event);
};
socket.onmessage = function(event) {
    // 服务器发送消息时触发，可以在这里处理接收到的消息
    console.log('Message from server ', event.data);
};
socket.onclose = function(event) {
    // 当连接关闭时触发，可以在这里处理连接关闭后的清理工作
    console.log('WebSocket connection closed.', event);
};
socket.onerror = function(error) {
    // 在发生通信错误时触发
    console.error('WebSocket error observed:', error);
};