我的插件开发学习4--html5之Websocket对象

关注

原创最新推荐文章于 2026-03-31 03:20:53 发布 2.6k 阅读 AI 写同款· GEO 优化 ›

全栈开发实战：HTML与WebSocket实时通信在即时通讯、在线协作、股票行情等需要“秒级响应”的场景中，传统HTTP协议因“请求-响应”的单向模式显得力不从心。本文将聚焦WebSocket协议，教你如何用最常见的HTML（前端）+Node.js（后端）技术栈，实现客户端与服务器的双向实时通信。内容覆盖原理讲解、代码实战、场景应用，让你既能“知其然”也能“知其所以然”。本文将按“原理→实战→应用”的逻辑展开：先通过生活案例理解WebSocket的核心价值，再拆解前后端代码实现，最后结合实际场景说明如何落地。WebSocket。阅读详情

WebSocket简介

WebSocket protocol 是HTML5一种新的协议(protocol)。它是实现了浏览器与服务器全双工通信(full-duplex)。

现在，很多网站为了实现即时通讯(real-time)，所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(time interval)（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求(request)，然而HTTP request 的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽。

而最比较新的技术去做轮询是采用AJAX，但这种技术虽然可达到全双工通信，但依然需要发出请求(reuqest)。

在WebSocket API，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中，为我们实现即使服务带来了两大好处：1. Header 互相沟通的Header是很小的-大概只有 2 Bytes 2. Server Push 服务器可以主动传送数据给客户端。

websocket通信协议实现的是基于浏览器的原生socket，目前firefox4.x及chrome的最新版都支持websocket对象。详细的websocket API，可以参考此文： http://dev.w3.org/html5/websockets/。需要说明的是，html5的标准化工作仍在进行中，其完全稳定下来可能需要5-10年的时间，因此其中许多规范包括这里有websocket都是不稳定的，你需要及时跟进才可以开发出正确的应用程序。

我们来简单看下websocket的IDL定义：

[Constructor(in DOMString url, in optional DOMString protocols)]

[Constructor(in DOMString url, in optional DOMString[] protocols)]

interface WebSocket
{
readonly attribute DOMString url;

// ready state
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSING = 2;
const unsigned short CLOSED = 3;
readonly attribute unsigned short readyState;
readonly attribute unsigned long bufferedAmount;

// networking
           attribute Function onopen;
           attribute Function onmessage;
           attribute Function onerror;
           attribute Function onclose;
readonly attribute DOMString protocol;
void send(in DOMString data);
void close();
};

在客户端的JS脚本中使用websocket对象是十分简单的，只需要生成一个对象，随后定义4个事件处理函数即可。下面是一个极为简单的示例：

var ws = new websocket(ws://www.xxx.com/path)

ws.onopen=function(){alert("connection opened")}

ws.onerror=function(){}

ws.onmessage=function(msg){alert(msg)}

ws.onclose=function(){alert("connection close")}

ws.send("hello server")

ws.close()

目前支持websocket的服务器很多，apache已经支持，此外还有其他一些专门的websocket非web服务器的实现，比如基于java实现的jwebsockets。

下面介绍一下websocket的协议。其协议过程十分简单，首先是类http请求、响应的握手过程，一旦握手成功，以后的双向通信便直接基于tcp协议传送数据，而不再使用http进行封装，从而减少了不必要的数据传输。握手协议也十分简单，可以用下面的两段http交互表示：

GET /path HTTP/1.1
Upgrade: WebSocket
Connection: Upgrade
Host: www.host.com:8000
Origin: http://www.host.com
Cookie: someCookie

HTTP/1.1 101 Web Socket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
WebSocket-Origin: http://www.host.com
WebSocket-Location: ws://www.host.com:8000/path
websocket支持二进制数据的传输，服务端在连接建立后只管往socket里面写数据就可以了。websocket的通信数据全部是以”/x00″开头以”/xFF”结尾的，无论是服务端发出的数据还是客户端发送的数据都遵从这个格式，唯一不同的是客户端的WebSocket对象能够自动将头尾去除，获得主体数据，这就省却了在客户端处理原始数据的必要。此外WebSocket通信数据的编码总是UTF-8格式的。

收录于