WebSocket全部内容及项目经验 |
您所在的位置：网站首页 › websocket接口设计指南 › WebSocket全部内容及项目经验 |
|
一.websocket简介
在websocket未出来之前，实现实时数据更新都是采用轮询http请求实现的，很明显这种方式有很大的缺陷，一条数据就需要发一次http请求。HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。而比较新的技术去做轮询的效果是Comet。这种技术虽然可以双向通信，但依然需要反复发出请求。而且在Comet中，普遍采用的长链接，也会消耗服务器资源。在这种情况下，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。 websocket是一种建立在TCP协议上的一种长链接通讯模式，是HTML5推出的，全称是全双工通讯协议。它可以实现服务器和客户端双向通讯，也就是前后端可以互相发送数据。 二.WebSocket优势浏览器和服务器只需要要做一个握手的动作，在建立连接之后，双方可以在任意时刻，相互推送信息。同时，服务器与客户端之间交换的头信息很小。实时更新数据，连接不会断开。 运用项目场景：实时数据更新、聊天信息、大数据列表更新。 三.简单介绍一下长链接和短链接 长链接：连接->传输数据->保持连接 -> 传输数据->............ ->关闭连接。 长连接指建立SOCKET连接后不管是否使用都保持连接，但安全性较差。 短链接：连接->传输数据->关闭连接 HTTP是无状态的，浏览器和服务器每进行一次HTTP操作，就建立一次连接，但任务结束就中断连接。 也可以这样说：短连接是指SOCKET连接后发送后接收完数据后马上断开连接。 四.websocket 的四个主要事件： open事件：一旦服务器响应了WebSocket连接请求，open事件触发并建立一个连接。open事件对应的回调函数称作onopen。 open事件触发时，协议握手已经完成，WebSocket已经准备好发送和接收数据。如果应用程序接收到一个open事件，那么可以确定WebSocket服务器成功地处理了连接请求，并且同意与应用程序通信。message事件：message事件在接收到消息时触发，对应于该事件的回调函onmessage。error事件：error事件在响应意外故障的时候触发，与该事件对应的回调函数为onerror。一般error触发了很快就会触发close关闭链接事件，所以当项目中websocket无法建立连接时控制台打印会让人误以为直接触发的close事件。close事件：close事件在WebSocket连接关闭时触发，对应于close事件的回调函数是onclose。一旦连接关闭，客户端和服务器不再接收或者发送消息。当调用close() 方法终止与服务器的连接时，也会触发onclose事件处理程序。close事件中的代码和原因有时候能告诉你错误的根源，error事件处理程序是调用服务器重连逻辑以及处理来自WebSocket对象异常的最佳场所。 五.websocket的属性：Socket.readyState： 只读属性 readyState 表示连接状态。 Socket.bufferedAmount: 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。 下面的代码展示一个使用bufferedAmount 特性每秒发送更新的例子。如果网络无法承受这一速率，它会相应作出调整。 var THRESHOLD = 10240; var ws = new WebSocket("ws://echo.websocket.org/updates"); ws.onopen = function() { setInterval( function(){ if (ws.bufferedAmount < THRESHOLD) { ws.send(getApplicationState()); } }, 1000); }对于限制应用向服务器发送数据的速率，从而避免网络饱和，bufferedAmount很有用。 六.websocket和socket的区别（面试常问）WebSocket：WebSocket协议是基于TCP的一种新的网络协议，和http协议一样属于应用层协议，是一种让客户端和服务器之间能进行双向实时通信的技术。 Socket：Socket是应用层与TCP/IP协议族通信的中间软件抽象层，它是一组接口。 七.websocket在项目中的使用在HTML中的使用： let url = "ws://ip+端口号+通道"; // "ws:// 192.168.135.30:8000/CHANNL" // let url = "wss://ip+端口号+通道"; // "wss:// 192.168.135.30:8000/CHANNL" 携带加密证书 let ws = new WebSocket(url); ws.onopen = function (e) { console.log("建立连接"); ws.send(); // 前端向后端推送数据 }; ws.onmessage = function (e) { console.log("后端推送给前端的实时数据：", e); // e就是接收到的数据 }; ws.onerror = function (e) { console.log("WebSocket Error:", e); }; ws.onclose = function (e) { console.log("关闭连接", e); };在vue项目中的使用： data () { return { wsurl: "process.env.NODE_ENV === 'development'" ? "ws://ip+端口号+通道" : "生产环境url", // "ws:// 192.168.135.30:8000/CHANNL" }; }, mounted () { this.initWebsocket(); }, methods: { initWebsocket () { let ws = new WebSocket(this.wsurl); ws.onopen = function (e) { console.log("建立连接"); ws.send(); // 前端向后端推送数据 }; ws.onmessage = function (e) { console.log("后端推送给前端的实时数据：", e); // e就是接收到的数据 }; ws.onerror = function (e) { console.log("WebSocket Error:", e); }; ws.onclose = function (e) { console.log("断开连接", e); // 断开重连 this.initWebsocket(); }; } }, |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |