Vue頁面template
<template> <div> <canvas style="width: 80%!important;height: auto!important;" id="canvas"></canvas> <br/>{{charId}} </div> </template> Vue頁面js
<script> export default { data() { return { websock: null,//建立的連接 charId: s.uuid(),//隨機生成的UUID lockReconnect: false,//是否真正建立連接 timeout: 28*1000,//30秒一次心跳 timeoutObj: null,//心跳心跳倒計時 serverTimeoutObj: null,//心跳倒計時 timeoutnum: null,//斷開 重連倒計時 lastRunTime: Date.now(),//上次播放聲音的時間 }; }, created() { //頁面剛進入時開啟長連接 this.initWebSocket(); }, destroyed: function() { //頁面銷毀時關閉長連接 this.websocketclose(); }, methods: { initWebSocket(){//建立連接 //初始化weosocket //const wsuri = "ws://sms.填寫您的地址.com/websocket/" + this.charId; //ws地址 const wsuri = "" //建立連接 this.websock = new WebSocket(wsuri); //連接成功 this.websock.onopen = this.websocketonopen; //連接錯誤 this.websock.onerror = this.websocketonerror; //接收信息 this.websock.onmessage = this.websocketonmessage; //連接關閉 this.websock.onclose = this.websocketclose; }, reconnect() {//重新連接 var that = this; if(that.lockReconnect) { return; }; that.lockReconnect = true; //沒連接上會一直重連，設置延遲避免請求過多 that.timeoutnum && clearTimeout(that.timeoutnum); that.timeoutnum = setTimeout(function () { //新連接 that.initWebSocket(); that.lockReconnect = false; },5000); }, reset(){//重置心跳 var that = this; //清除時間 clearTimeout(that.timeoutObj); clearTimeout(that.serverTimeoutObj); //重啟心跳 that.start(); }, start(){//開啟心跳 var self = this; self.timeoutObj && clearTimeout(self.timeoutObj); self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj); self.timeoutObj = setTimeout(function(){ //這里發送一個心跳，后端收到后，返回一個心跳消息， if (self.websock.readyState == 1) {//如果連接正常 self.websock.send("heartCheck"); }else{//否則重連 self.reconnect(); } self.serverTimeoutObj = setTimeout(function() { //超時關閉 self.websock.close(); }, self.timeout); }, self.timeout) }, playSound(){//播放聲音 var borswer = window.navigator.userAgent.toLowerCase(); if (borswer.indexOf("ie") >= 0) { //IE內核瀏覽器 var strEmbed = '<embed name="embedPlay" src="/static/assets/mp3/dingdong.wav" autostart="true" hidden="true" loop="false"></embed>'; if ($("body").find("embed").length <= 0) $("body").append(strEmbed); var embed = document.embedPlay; //瀏覽器不支持 audion，則使用 embed 播放 embed.volume = 100; //embed.play();這個不需要 } else { //非IE內核瀏覽器 var strAudio = "<audio id='audioPlay' type='audio/mpeg' src='/static/assets/mp3/dingdong.wav' hidden='true'>"; if ($("body").find("audio").length <= 0) $("body").append(strAudio); var audio = document.getElementById("audioPlay"); var currentTime = Date.now(); var protectTime = 500;//設置保護性延時 單位毫秒，不要小於50 建議100以上 if((currentTime - this.lastRunTime) < protectTime){ return;//兩次執行太過頻繁，直接退出 } if(audio.paused){ audio.play(); }else{ audio.pause(); } this.lastRunTime = Date.now(); //瀏覽器支持 audion // if (audio.paused){ // audio.play(); // } } }, websocketonopen() {//連接成功事件 //生成二維碼(參數內容，canvas的id) s.qrcode(this.charId,"canvas") //提示成功 s.success("連接成功",3) //開啟心跳 this.start(); }, websocketonerror(e) {//連接失敗事件 //錯誤 console.log("WebSocket連接發生錯誤"); //錯誤提示 s.error("Websocket error, Check you internet!") //重連 this.reconnect(); }, websocketclose(e) {//連接關閉事件 //關閉 console.log("connection closed (" + e.code + ")"); //提示關閉 s.error("連接已關閉",3); //重連 this.reconnect(); }, websocketonmessage(event) {//接收服務器推送的信息 //打印收到服務器的內容 console.log(event.data); //收到服務器信息，心跳重置 this.reset(); //播放聲音 this.playSound(); }, websocketsend(msg) {//向服務器發送信息 //數據發送 this.websock.send(msg); }, } }; </script> 其他js
/** * 返回uuid */ s.uuid = function () { function S4() { return (((1+Math.random())*0x10000)|0).toString(16).substring(1); } return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4()); } import QRCode from 'qrcode' /** * body 二維碼的內容 * 生成二維碼的 畫布id */ s.qrcode = function(body,id){ var canvas = document.getElementById(id) QRCode.toCanvas(canvas, body, function (error) { if (error){ console.error(error) } else{ console.log('success!'); } }) } 部分截圖
QQ截圖20181218170335.jpg
QQ截圖20181218170907.jpg
用途
- 即使通訊
- 消息通知
- 封裝當前頁面地址到APP內
使用電視(安卓)安裝APP
掃碼進行長連接通信，傳遞權限和一些參數，當前頁面獲取參數進行展示不同的可視化數據或報表等信息。