1.实时通讯的方式
1.1 Ajax轮询
异步的方式,是通过ajax+js的方式,每隔一段时间发送一个请求到后端,询问服务器有没有相关的消息或者是数据的更新,如果有就把数据拿到前端进行渲染。但是这种方式是一种死循环,会一直循环下去。ajax是不需要刷新浏览器的,页面上的一些状态更新的操作就需要使用ajax轮询去做。
1.2 Long pull
Long pull的原理和Ajax轮询的方式是差不多的,但是不同的是Long pull是一种阻塞的方式。性能差
这两种方式其实都是向服务器发送请求等待处理,都是被动的。这两种方式的性能都是不怎么好的。
1.3 Websocket
websocket是一种连接协议,是一种长连接,http1.0是一种短连接。服务端和客户端会一直保持着连接。并且服务端会主动的推送消息给客户端。websocket是一种实时化的协议,Http的一个周期是request来界定。也就是说有一个请求发送到服务端,服务端就会做出响应。一个request对应一个response。多个request对应的是多个response。数量是一一对应的。
websocket连接建立之后,服务端就会一直不停的向客户端发送请求。主动的推送消息给客户端。只需要建立一次请求,就会源源不断的推送想要的数据给客户端。除非自己断开连接重新连接。
2.websock连接的过程
首先写一个小demo
(1)先在html界面上构建一个骨架,用于展示发送消息和接收消息的内容。
<div>发送消息:</div>
<input type="text" id="msgContent"/>
<input type="button" value="点击发送" onclick="CHAT.chat()"/>
<div>接收消息:</div>
<div id="receiveMsg" style="background-color: gainsboro;"></div>
(2)开始编写建立websocket连接的过程
首先定义一个CHAT对象
window.CHAT = {
soctet: null,
init:function() { //初始化的方法
//判断当前浏览器是否支持websocket
if(window.WebSocket) {
// 进行初始化操作
CHAT.socket = new WebSocket('ws://localhost:8080/ws'); //创建一个新的WebSocket
//定义CHAT生命周期函数
CHAT.socket.onopen = function() {
console.log('客户端和服务端的连接建立成功');
}
CHAT.socket.onmessage = function() {
console.log('接收到的消息' + e.data);
var receiveMsg = document.getElementById('receiveMsg');
var html = receiveMsg.innerHTML;
receiveMsg.innerHTML = html + "<br />" + e.data;
}
CHAT.socket.onclose = function() {
console.log('消息关闭.....');
}
CHAT.socket.onerror = function() {
console.log('消息发生错误');
}
}else {
alert('当前浏览器不支持websocket协议');
}
},
chat:function() {
var msg = document.getElementById("msgContent");
CHAT.socket.send(msg.value);
}
}