上一篇介绍了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);
}