服务器推送---html5 websocket的使用

        在 Web 应用中,浏览器和服务器之间使用的是请求 / 响应的交互模式。浏览器发出请求,服务器根据收到的请求来生成相应的响应。浏览器再对收到的响应进行处理,展现给用户。这种方式的不足之处在于:服务器端产生的数据变化不能及时地通知浏览器,而是需要等到下次请求发出时才能被浏览器获取。对于某些对数据实时性要求很高的应用来说,这种延迟是不能接受的。

        为了满足这类应用的需求,就需要有某种方式能够从服务器端推送数据给浏览器,以保证服务器端的数据变化可以在第一时间通知给用户。目前常见的解决办法有不少,主要可以分成两类。这两类方法的区别在于是否基于 HTTP 协议来实现。不使用 HTTP 协议的做法是使用 HTML 5 新增的 WebSocket 规范,而使用 HTTP 协议的做法则包括简易轮询、COMET 技术和 HTML 5 服务器推送事件。


        什么是HTML 5 服务器推送事件?

        服务器推送(server push)指的是,还没有收到浏览器的请求,服务器就把各种资源推送给浏览器。

        比如,浏览器只请求了index.html,但是服务器把index.html、style.css、example.png全部发送给浏览器。这样的话,只需要一轮 HTTP 通信,浏览器就得到了全部资源,提高了性能。

        

冷暖自知一抹茶ck

    服务器推送事件示意图


        传统的网页请求方式是什么样的?

        

冷暖自知一抹茶ck

        在传统的网页请求方式之下,如果要显示index.html页面,浏览器会发出三个请求。第一个请求是获取index.html标签结构。

GET /index.html HTTP/1.1

        服务器收到这个请求,就会把index.html标签结构发送给浏览器。当浏览器发现里面包含了样式表和图片后,它会再发出两个请求,以获取样式表和图片。如下:

GET /style.css HTTP/1.1

GET /example.png HTTP/1.1

        传统的网页请求方式有两个问题:

        一是至少需要两轮 HTTP 通信。

        二是收到样式文件之前,网页都会显示一片空白,这个阶段一旦超过2秒,用户体验就会非常不好。



        下面介绍使用 HTML 5 新增的 WebSocket 来实现服务器推送。

冷暖自知一抹茶ck

        Websocket简介

        WebSocket 协议在2008年诞生,2011年成为国际标准。所有浏览器都已经支持了。它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。

        WebSocket是一种通讯手段,基于TCP协议,默认端口也是80和443,协议标识符是ws(加密为wss),它实现了浏览器与服务器的全双工通信,扩展了浏览器与服务端的通信功能,使服务端也能主动向客户端发送数据,不受跨域的限制。

        WebSocket用来解决http不能持久连接的问题,因为可以双向通信所以可以用来实现聊天室,以及其他由服务端主动推送的功能例如 实时天气、股票报价、余票显示、消息通知等

        其他特点包括:

        (1)建立在 TCP 协议之上,服务器端的实现比较容易。

          (2)与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。

        (3)数据格式比较轻量,性能开销小,通信高效。

        (4)可以发送文本,也可以发送二进制数据。

        (5)没有同源限制,客户端可以与任意服务器通信。

        (6)协议标识符是ws(如果加密,则为wss),服务器网址就是 URL。



        客户端实现

        WebSocket 的用法相当简单,直接调用 HTML 5的WebSocket 客户端的 API 就行了。WebSocket 客户端的 API 如下:

        1、WebSocket 构造函数

        WebSocket 对象作为一个构造函数,用于新建 WebSocket 实例。

var ws = new WebSocket("ws://localhost:8080");

        执行上面语句之后,客户端就会与服务器进行连接。

        

        2、ws.readyState

        readyState属性返回实例对象的当前状态:

CONNECTING:值为0,表示正在链接。
OPEN:值为1,表示连接成功,可以通信了。
CLOSING:值为2,表示连接正在关闭
CLOSED:值为3,表示连接已经关闭,或者打开连接失败

        

        3、ws.onopen

        实例对象的onopen属性,用于指定连接成功后的回调函数。

ws.onopen = function(){
	ws.send('Hello Server');
}

        如果要指定多个回调函数,可以使用addEventListener方法。

ws.addEventListener('open', function(event){
	ws.send('Hello Server!');
})

        

        4、ws.onclose

        实例对象的onclose属性,用于指定连接关闭后的回调函数。

ws.onclose = function(event){
	var code = event.code;
	var reason = event.reason;
	var wasClean = event.wasClean;
	//handle close event
};

ws.addEventListener("close", function(event){
	var code = event.code;
	var reason = event.reason;
	var wasClean = event.wasClean;
	//handle close event
})


        5、ws.onmessage

        实例对象的onmessage属性,用于指定收到服务器数据后的回调函数。

ws.onmessage = function(event){
	var data = event.data;
	//处理数据
};

ws.addEventListener("message", function(event){
	var data = event.data;
	//处理数据
})

        注意:服务器数据可能是文本,也可能是二进制数据(blob对象或Arraybuffer对象)。

ws.onmessage = function(event){
	if(typeof event.data === String){
		console.log("Reveived data string");
	}
	
	if(event.data instanceof ArrayBuffer){
		var buffer = event.data;
		console.log("Reveived arraybuffer");
	}
};

        除了动态判断收到的数据类型,也可以使用binaryType属性,显式指定收到的二进制数据类型。

//收到的是 blob 数据
ws.binaryType = "blob";
ws.onmessage = function(e){
	console.log(e.data.size);
}

//收到的是 ArrayBuffer 数据
ws.binaryType = "arraybuffer";
ws.onmessage = function(e){
	console.log(e.data.byteLength);
}


        6、ws.send

        实例对象的send()方法用于向服务器发送数据。

        发送文本:

ws.send("your message");

        发送 Blob 对象:

var file = document.querySelector('input[type="file"]').files[0];
ws.send(file);

        发送 ArrayBuffer 对象

//Sending canvas ImageData as ArrayBuffer
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);
for(var i = 0; i < img.data.length; i++){
	binary[i] = img.data[i];
}
ws.Send(binary.buffer);


        7、ws.bufferedAmount

        实例对象的bufferedAmount属性,表示还有多少字节的二进制数据没有发送出去。它可以用来判断发送是否结束。

var data = new ArrayBuffer(10000000);
ws.send(data);

if(ws.bufferedAmount === 0){
	//发送完毕
}else{
	//发送还没结束
}


        8、ws.onerror

        实例对象的onerror属性,用于指定报错时的回调函数。

ws.onerror = function(event){
	// handle error event
};

ws.addEventListener("error", function(event){
	// handle error event
});


        服务端实现

        WebSocket 服务器的实现有很多种,PHP、Java、Node……都有其实现的方式。下面主要介绍PHP的实现方式。PHP的实现可以参考Workerman或Swoole。

        如果使用Workerman,可以按如下方式实现:

        

冷暖自知一抹茶ck

        如果使用Swoole,可以按如下方式实现:

冷暖自知一抹茶ck

冷暖自知一抹茶ck
请先登录后发表评论
  • 最新评论
  • 总共0条评论