实现以上功能
如题,我知道主要有两大种思路:
- 轮询:轮询的原理是隔一段时间向服务器发送一个请求,这里不累述。这里主要谈一下第二种思路。
- websocket进行前后端通讯:websocket是html5的新协议,基于TCP,在一次握手后,建立http连接,实现客户端与服务端全双工通信。相比较轮询机制,节约资源,不需要频繁的请求
websocket实时更新
WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
代码如下
creatSocket() {
let wsURL = wsURL //引入配置地址
that = this,
websocket;
// 判断浏览器是否支出 WebSocket
if ("WebSocket" in window) {
websocket = new WebSocket(wsURL);
} else {
alert("当前浏览器不支持 'WebSocket'");
}
//连接发生错误的回调方法
websocket.onerror = function (event) {
console.log("WebSocket-连接发生错误", event);
};
//连接成功时的回调方法
websocket.onopen = function (event) {
console.log("WebSocket-连接成功", event);
};
//接收到消息的回调方法
websocket.onmessage = function (event) {
console.log("WebSocket-接收到数据", event);
};
//连接关闭的回调方法
websocket.onclose = function (event) {
console.log("WebSocket-连接关闭", event);
};
},