websocket应用场景
原则上,判断标准就是以下2个:
你的应用需要提供给多个用户同时交流吗?
你的应用需要展示服务器端经常变动的数据吗?
以下是一些典型的应用场景:
社交 / 订阅
比如微信朋友圈的实时更新提醒、点赞或评论的红点通知,比如qq的特别关注人的动态提醒,比如聊天信息的实时同步,比如新闻客户端的订阅通知等等。
多玩家游戏
对于在线实时的多人游戏,互动效率是非常重要的,你可不想在扣动扳机之后,你的对手却已经在10秒钟之前移动了位置。
协同办公 / 编辑
我们生活在分散式办公的时代,时常需要在不同地点同时编辑同一份文档,比如 office文档、编程文件等。
股市基金报价
金融界瞬息万变——几乎是每毫秒都在变化。过时的信息也只能导致损失,我们人类的大脑不能持续以那样的速度处理那么多的数据,需要一些算法来帮我们处理这些事情。当你有一个显示盘来跟踪你感兴趣的公司时,你肯定想要随时知道他们的价值,而不是10秒前的数据。使用WebSocket可以流式更新这些数据变化而不需要等待。
体育实况播放
在体育播报的体验中,减低时延是最重要的一点。
音视频聊天 / 视频会议 / 在线教育
用WebSockets getUserMedia API和HTML5音视频元素明显是个不错的选择。WebRTC的出现顺理成章的成为我刚才概括的组合体,它看起来很有希望,但其缺乏目前浏览器的支持。
基于位置的应用
越来越多的开发者借用移动设备的GPS功能来实现他们基于位置的网络应用。比如共享单车、共享汽车、地图GPS服务、疫情监控目标人的实时运动轨迹、运动员的轨迹分析。借用WebSocket TCP链接可以让数据飞起来。
图:http轮询(短轮询和长轮询)、websocket、SSE 三种客户端实时获取服务端的技术比较
概念:
全双工通讯:
又称为双向同时通信,即通信的双方可以同时发送和接收信息的信息交互方式。
SSE(Server Sent Events)
就是浏览器向服务器发送了一个HTTP请求,保持长连接,服务器不断单向地向浏览器推送“信息”,这么做是为了节省网络资源,不用一直发请求,建立新连接。不过依然是基于HTTP的。
优点:SSE和WebSocket相比,最大的优势是便利,服务端不需要第三方组件,开发难度低,SSE和轮询相比它不用处理很多请求,不用每次建立新连接,延迟低。
缺点:如果客户端有很多需要保持很多长连接,这回占用大量内存和连接数。而且兼容性差,只能用于高级浏览器中。
vue中
created() { this.initWebSocket() }, destroyed() { this.websocketonclose() }, methods: { //websocket initWebSocket() { if ("WebSocket" in window) { const wsuri = baseConfig.WS_URL this.websock = new WebSocket(wsuri) this.websock.onopen = this.websocketonopen this.websock.onerror = this.websocketonerror this.websock.onmessage = this.websocketonmessage this.websock.onclose = this.websocketonclose } else { this.$Message.error({ content: "您的浏览器不支持 WebSocket!", duration: 5 }); } }, websocketonopen() { console.log("WebSocket连接成功") }, websocketonerror() { }, websocketonmessage(e) { if (e.data == \'RELEASE_ROUTE_SUCCESS\') { this.$Message.success("发布成功") } else if (e.data == \'RELEASE_ROUTE_FAIL\') { this.$Message.error("发布失败") } else if (e.data == \'UPPER_ROUTE_SUCCESS\') { this.$Message.success("上架成功") } else if (e.data == \'UPPER_ROUTE_FAIL\') { this.$Message.error("上架失败") } else if (e.data == \'LOWER_ROUTE_SUCCESS\') { this.$Message.success("下架成功") } else if (e.data == \'LOWER_ROUTE_FAIL\') { this.$Message.error("下架失败") } else if (e.data == \'DEL_ROUTE_SUCCESS\') { this.$Message.success("操作成功") } else if (e.data == \'DEL_ROUTE_FAIL\') { this.$Message.error("操作失败") } this.$Modal.remove() this.refresh(\'1\') }, websocketonclose() { console.log("WebSocket关闭成功") }, websocketonsend(a) { console.log("发送数据") this.websock.send(a) }, // 发布 publish(id, a) { let params = { routeId: id, routePublishType: a } let text = \'\' if (a == \'0\') { text = \'发布\' } else { text = \'上架\' } let me = this params.operateType = \'RELEASE_ROUTE\' me.websocketonsend(JSON.stringify(params)) /* this.$http.request(this, "POST", "/IMC033017.do",params).then(function (response) { let body = response.data.body if(body.errorCode == \'0\' || body.errorCode == \'00\'){ me.$Message.success(text+\'成功\') me.getData() }else { me.$Message.error(text+\'失败\') } }).catch(function (error) { me.$Message.error(text+\'失败\') })*/ }, //取消发布 delPublish(id) { console.log(id, \'id\') let params = { routeId: id, routePublishType: \'1\' } let me = this params.operateType = \'LOWER_ROUTE\' me.websocketonsend(JSON.stringify(params)) /* this.$http.request(this, "POST", "/IMC033017.do",params).then(function (response) { let body = response.data.body if(body.errorCode == \'0\' || body.errorCode == \'00\'){ me.$Message.success(\'下架成功\') me.getData() }else { me.$Message.error(\'下架失败\') } }).catch(function (error) { me.$Message.error(\'下架失败\') })*/ }, //切换页码 refresh(e) { this.currentPage = e this.getData() }, }