WebSocket的简单介绍及应用
定时刷新的不足与改进
web开发中可能遇到这样的场景:网页里的某一块区域里写了一些内容,但这些内容不是固定的,即使看网页的人没有做任何操作,它们也会随时间不断变化。股票行情、活动或游戏的榜单都是比较常见的例子。
对此,一般的做法是用 setTimeout() 或 setInverval() 定时执行任务,任务内容是Ajax访问一次服务器,并在成功拿到返回数据后去更新页面。
这种定时刷新的做法会有这样一些感觉不足的地方: 频繁的定时网络请求对浏览器(客户端)和服务器来说都是一种负担,尤其是当网页里有多个定时刷新区域的时候。某几次的定时任务可能是不必要的,因为服务器可能并没有新数据,还是返回了和上一次一样的内容。页面内容可能不够新,因为服务器可能刚更新了数据,但下一轮定时任务还没有开始。
造成这些不足的原因归结起来,主要还是由于服务器的响应总是被动的。HTTP协议限制了一次通信总是由客户端发起请求,再由服务器端来返回响应。
因此,如果让服务器端也可以主动发送信息到客户端,就可以很大程度改进这些不足。WebSocket就是一个实现这种双
向通信的新协议。
WebSocket是基于HTTP的功能追加协议
WebSocket最初由html5提出,但现在已经发展为一个独立的协议标准。WebSocket可以分为协议( Protocol )和 API 两部分,分别由 IETF 和W3C制定了标准。 先来看看WebSocket协议的建立过程。
为了实现WebSocket通信,首先需要客户端发起一次普通HTTP请求(也就是说,WebSocket的建立是依赖HTTP的)。请求报文可能像这样:
GET ws://websocket.example.com/ HTTP/1.1 Host: websocket.example.com Upgrade: websocket Connection: Upgrade Origin: http://example.com
Sec-WebSocket-Key:pAloKxsGSHtpIHrJdWLvzQ== Sec-WebSocket-Version:13 其中HTTP头部字段 Upgrade: websocket 和 Connection: Upgrade 很重要,告诉服务器通信协议将发生改变,转为WebSocket协议。支持WebSocket的服务器端在确认以上请求后,应返回状态码为 101 Switching Protocols 的响应:
HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept:
nRu4KAPUPjjWYrnzxDVeqOxCvlM= 其中字段
Sec-WebSocket-Accept 是由服务器对前面客户端发送的 Sec-WebSocket-Key 进行确认和加密后的结果,相当于一次验证,以帮助客户端确信对方是真实可用的WebSocket服务器。
验证通过后,这个握手响应就确立了WebSocket连接,此后,服务器端就可以主动发信息给客户端了。此时的状态比较像服务器端和客户端接通了电话,无论是谁有什么信息想告诉对方,开口就好了。
一旦建立了WebSocket连接,此后的通信就不再使用HTTP了,改为使用WebSocket独立的数据帧(这个帧有办法看到,见后文)。 整个过程像这样:
简单的应用示例
应用WebSocket有这样几件事要做:
选用 支持WebSocket的浏览器 。 网页内添加创建WebSocket的代码。服务器端添加使用WebSocket通信的
代码。 服务器端
以Node的服务器为例,我们使用 ws 这个组件,这样搭建一个支持WebSocket的服务器端:
var request = require(\var dateFormat = require(\var WebSocket = require(\
WebSocketServer = WebSocket.Server, wss = new WebSocketServer({ port: 8080, path: \
});// 收到来自客户端的连接请求后,开始给客户端推消息
wss.on(\ ws.on(\ console.log(\ });
sendGuestInfo(ws); });function sendGuestInfo(ws) {
request(\ function(error, response, body) {
if (!error && response.statusCode === 200) {
var jsonObject = JSON.parse(body), guest = jsonObject.name + jsonObject.surname,
guestInfo = { guest: guest,
time: dateFormat(new Date(), \
}; if (ws.readyState === WebSocket.OPEN) { // 发,送
ws.send(JSON.stringify(guestInfo)); // 用随机来“装”得更像不定时推送一些 setTimeout(function() { sendGuestInfo(ws);
}, (Math.random() * 5 + 3) * 1000); } } });
} 这个例子使用了姓名生成站点 uinames 的API服务,来生成 {guest: \人名\这样的数据。函数
WebSocket的简单介绍及应用
![](/skin/haowen/images/icon_star.png)
![](/skin/haowen/images/icon_star.png)
![](/skin/haowen/images/icon_star.png)
![](/skin/haowen/images/icon_star.png)