html5的websockets全双工通信详解学习示例
程序员文章站
2023-11-13 08:44:40
本文主要研究HTML5 WebSockets的使用方法，它是HTML5中最强大的通信功能，定义了一个全双工的通信信道，只需Web上的一个Socket即可进行通信，能减少不必要的网络流量并降低网络延迟。... 14-02-26...
目前实时web应用的实现方式，大部分是围绕轮询和其他服务器端推送技术展开的，其中最著名的是comet。comet技术可以让服务器主动以异步方式向客户端推送数据。
使用轮询时，浏览器定期发送http请求，并随即接收响应；使用长轮询时，浏览器向服务器发送一个请求，服务器会在一段时间内将其保持在打开状态；使用流解决方案时，浏览器会发送一个完整的http请求，但服务器会发送并保持一个处于打开状态的响应，该响应持续更新并无限期处于打开状态。
上述的三个方法，在发送实时数据时都会涉及到http请求和响应包头，且包含大量额外的、不必要的报头数据，会造成传输延迟。
一、解读html5 websockets
1、websocket握手
为了建立websocket通信，客户端和服务器在初始握手时，将http协议升级到websocket协议。一旦连接建立成功，就可以在全双工模式下在客户端和服务器之间来回传送websocket消息。
注：在网络中，每个消息以0x00字节开头，以0xff结尾，中间数据采用utf-8编码格式。
2、websocket接口
除了对websocket协议的定义之外，还定义了用于javascript应用程序的websocket接口。
复制代码
代码如下:interface websocket{
readonly attribute domstring url;
//就绪状态
const unsigned short connecting = 0;
const unsigned short open = 1;
const unsigned short closed = 2;
readonly attribute unsigned short readystate;
readonly attribute unsigned short bufferedamount;
//网络
attribute function onopen;
attribute function onmessage;
attribute function onclose;
boolean send(in domsstring data);
void close();
};
websocket implements eventtarget;
注意：ws://和wss://前缀分别表示websocket连接和安全的websocket连接。
二、html5 websockets api
本节讨论html5 websockets的使用方法
1、检测浏览器是否支持
通过window.websocket来判断浏览器是否支持。
2、api的基本用法
a. websocket对象的创建以及与websocket服务器的连接
复制代码
代码如下:url = "ws://localhost:8080/echo";
ws = new websocket(url);
b. 添加事件监听器
websocket遵循异步编程模型，打开socket后，只需等待事件发生，而不需主动向服务器轮询，因此需要添加回调函数来监听事件。
websocket对象有三个事件：open、close和message。当连接建立时触发open事件，当收到消息时触发message事件，当websocket连接关闭时触发close事件。
复制代码
代码如下:ws.onopen = function(){
log("open");
}
ws.onmessage = function(){
log(e.data);
}
ws.onclose = function(){
log("closed");
}
c. 发送消息
当socket处于打开状态（即调用onopen监听程序之后，调用onclose监听程序之前），可以使用send方法发送消息。
ws.send("hello world");
三、html5 websockets 应用示例
本节将结合前面讲述的geolocation接口来创建一个直接在web页面中计算距离的应用。
1、编写html文件
复制代码
代码如下:<!doctype html></p> <p><html></p> <p> <head></p> <p> <meta http-equiv="content-type" content="text/html; charset=utf-8"></p> <p> <title>html5 websocket / geolocation 追踪器</title></p> <p> <link rel="stylesheet" href="styles.css"></p> <p> </head></p> <p> <body onload="loaddemo()"></p> <p> <h1>html5 websocket / geolocation 追踪器</h1></p> <p> <div><strong>geolocation</strong>: <p id="geostatus">你的浏览器不支持html5 geolocation</p></div></p> <p> <div><strong>websocket</strong>: <p id="socketstatus">你的浏览器不支持html5 web sockets</p></div></p> <p> </body></p> <p></html>
2、添加websocket代码
复制代码
代码如下:function loaddemo(){
//确保浏览器支持websocket
if(window.websocket){
url = "ws://localhost:8080";//broadcast websocket服务器位置
ws = new websocket(url);
ws.onopen = function(){
updatesocketstatus("连接已建立");
}
ws.onmessage = function(e){
updatesocketestatus("更新位置数据：" + datareturned(e.data));
}
}
}
3、添加geolocation代码
复制代码
代码如下:var geo;
if(navigator.geolocation){
geo = navigator.geolocation;
updategeolocationstatus("浏览器支持html5 geolocation");
}</p> <p>geo.watchposition(updatelocation,handlelocationerror,{maximumage:20000});//每20s更新一次</p> <p>function updatelocation(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var timestamp = position.timestamp;
updategeolocationstatus("位置更新时间：" + timestamp);
var tosend = json.stringify([myid,latitude,longitude]);
sendmylocation(tosend);
}
4、合并所有内容
复制代码
代码如下:<!doctype html></p> <p><html></p> <p> <head></p> <p> <meta http-equiv="content-type" content="text/html; charset=utf-8"></p> <p> <title>html5 websocket / geolocation 追踪器</title></p> <p> <link rel="stylesheet" href="styles.css"></p> <p> </head></p> <p> <body onload="loaddemo()"></p> <p> <h1>html5 websocket / geolocation 追踪器</h1></p> <p> <div><strong>geolocation</strong>: <p id="geostatus">你的浏览器不支持html5 geolocation</p></div></p> <p> <div><strong>websocket</strong>: <p id="socketstatus">你的浏览器不支持html5 web sockets</p></div></p> <p> </body></p> <p> <script></p> <p> //websocket的引用</p> <p> var ws;</p> <p> //为该会话生成的唯一随机的id</p> <p> var myid = math.floor(100000*math.random());</p> <p> //当前显示的行数</p> <p> var rowcount;</p> <p> function updatesocketstatus(message){</p> <p> document.getelementbyid("socketstatus").innerhtml = message;</p> <p> }</p> <p> function updategeolocationstatus(message){</p> <p> document.getelementbyid("geostatus").innerhtml = message;</p> <p> }</p> <p> function loaddemo(){</p> <p> //确保浏览器支持websocket</p> <p> if(window.websocket){</p> <p> url = "ws://localhost:8080";//broadcast websocket服务器位置</p> <p> ws = new websocket(url);</p> <p> ws.onopen = function(){</p> <p> updatesocketstatus("连接已建立");</p> <p> }</p> <p> ws.onmessage = function(e){</p> <p> updatesocketstatus("更新位置数据：" + datareturned(e.data));</p> <p> }</p> <p> }</p> <p> var geo;</p> <p> if(navigator.geolocation){</p> <p> geo = navigator.geolocation;</p> <p> updategeolocationstatus("浏览器支持html5 geolocation");</p> <p> }</p> <p> geo.watchposition(updatelocation,handlelocationerror,{maximumage:20000});//每20s更新一次</p> <p> function updatelocation(position){</p> <p> var latitude = position.coords.latitude;</p> <p> var longitude = position.coords.longitude;</p> <p> var timestamp = position.timestamp;</p> <p> updategeolocationstatus("位置更新时间：" + timestamp);</p> <p> var tosend = json.stringify([myid,latitude,longitude]);</p> <p> sendmylocation(tosend);</p> <p> }</p> <p> function sendmylocation(newlocation){</p> <p> if(ws){</p> <p> ws.send(newlocation)</p> <p> }</p> <p> }</p> <p> function datareturned(locationdata){</p> <p> var alldata = json.parse(locationdata);</p> <p> var incomingid = alldata[1];</p> <p> var incominglat = alldata[2];</p> <p> var incominglong = alldata[3];</p> <p> var incomingrow = document.getelementbyid(incomingid);</p> <p> if(!incomingrow){</p> <p> incomingrow = document.getelementbyid("div");</p> <p> incomingrow.setattribute("id",incomingid);</p> <p> incomingrow.usertext = (incomingid == myid)?"me":'user' + rowcount;</p> <p> rowcount++;</p> <p> document.body.appendchild(incomingrow);</p> <p> }</p> <p> incomingrow.innerhtml = incomingrow.usertext + " \\ lat: " +</p> <p> incominglat + " \\ lon: " +</p> <p> incominglong;</p> <p> return incomingrow.usertext;</p> <p> }</p> <p> function handlelocationerror(error){</p> <p> switch(error.code){</p> <p> case 0:</p> <p>updategeolocationstatus("检索位置信息出错: " + error.message);</p> <p>break;</p> <p> case 1:</p> <p>updategeolocationstatus("用户阻止获取位置信息。");</p> <p>break;</p> <p> case 2:</p> <p>updategeolocationstatus("浏览器不能检测你的位置信息: " + error.message);</p> <p>break;</p> <p> case 3:</p> <p>updategeolocationstatus("浏览器检索位置信息超时。");</p> <p>break;</p> <p> }
}</p> <p> </script></p> <p></html>