web异步与实时交互总结（二）

上一篇介绍了iframe和ajax，接下来见介绍websocket技术
iframe、ajax基本思路是浏览器端及时提交请求，服务器收到请求后进行阻塞，并保持连接，等待有消息发送时，及时向浏览器端进行响应推送。然而，这些技术都是基于http协议实现。从根本上将，http是半双工的协议，在同一时刻信息只能单向传输。然而在一些实时性要求高的场合，如在线订票系统、即时通信系统，当服务器数据发横变化是，需要主动实时的向客户端发送消息，将最新的数据或事件通知给用户，因此websocket这种全双工通信机制应运而生。
websocket通信

websocket通信机制
该协议是独立的、基于tcp的协议，其本质是先通过http/https协议进行握手后创建一个用于交换数据的tcp连接，此后服务器与浏览器端通过此tcp连接进行实时通信。
浏览器端http请求代码

<script>
var websocket = null;
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
websocket = new WebSocket("ws://127.0.0.1:8080/websocket");
}
else {
alert('当前浏览器 Not support websocket')
}

//连接发生错误的回调方法
websocket.onerror = function () {
setMessageInnerHTML("WebSocket连接发生错误");
};

//连接成功建立的回调方法
websocket.onopen = function () {
setMessageInnerHTML("WebSocket连接成功");
}

//接收到消息的回调方法
websocket.onmessage = function (event) {
setMessageInnerHTML(event.data);
}

//连接关闭的回调方法
websocket.onclose = function () {
setMessageInnerHTML("WebSocket连接关闭");
}

//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
closeWebSocket();
}
 
//将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
document.getElementById('message').innerHTML += innerHTML + '<br/>';
}
 
//关闭WebSocket连接
function closeWebSocket() {
websocket.close();
}
 
//发送消息
function send() {
var message = document.getElementById('text').value;
websocket.send(message);

}

web异步与实时交互总结（二）

猜你喜欢