前端实时通信的8种方式及其优缺点和实现方式

created(){ this.shortPolling = setInterval(function(){ that.getRuset() },5000) }, ... getResult(){ var that = this this.$axios('xxx,',post).then(res=>{ if(res.code === 200){//拿到想要的结果 ... //定时器是否清除由业务场景决定 clearInterval(this.shortPolling) } }) } 

getResult(){ var that = this this.$axios('xxx,',post).then(res=>{ if(res.code === 200){ ... }else{ this.getResult() } ... }) } 

//在vue中嵌入iframe  watchIframe(){ //先找到iframe的窗口 this.iframeWin = this.$refs.iframe.contentWindow; //向iframe发送信息,大括号内是发送的内容; this.iframeWin.postMessage( { },"*" ); //怎样监听iframe传过来的信息 window.addEventListener("message", this.handleMessage); //获取iframe传过来的信息 handleMessage(res){ //res为传过来的信息 ...//渲染页面 } } 

source.addEventListener('open', function (event) { // ... }, false); //客户端收到服务器发来的数据，就会触发message事件，可以在onmessage属性的回调函数。 source.addEventListener('message', function (event) { var data = event.data; // handle message }, false); //如果发生通信错误（比如连接中断），就会触发error事件，可以在onerror属性定义回调函数。 source.addEventListener('error', function (event) { // handle error event }, false); //close方法用于关闭 SSE 连接。 source.close(); 

 var ws = new WebSocket("wss://echo.websocket.org"); // 当连接建立成功，触发 open 事件 ws.onopen = function(evt) { console.log("建立连接成功 ..."); // 连接建立成功以后，就可以使用这个连接对象通信了 // send 方法发送数据 ws.send("Hello WebSockets!"); }; // 当接收到对方发送的消息的时候，触发 message 事件 // 我们可以通过回调函数的 evt.data 获取对方发送的数据内容 ws.onmessage = function(evt) { console.log("接收到消息: " + evt.data); // 当不需要通信的时候，可以手动的关闭连接 // ws.close(); }; // 当连接断开的时候触发 close 事件 ws.onclose = function(evt) { console.log("连接已关闭."); } 

/** 主线程 **/ //注册专用线程 let worker = new Worker ('worker.js') worker.onmessage = (e) => { console.log(e.data) // I post a message to main thread } worker.postMessage('main thread got a message') /**  子线程 worker.js  **/ onmessage = (e) => { console.log(e.data) // main thread got a message } postMessage('I post a message to main thread') // 在主线程中终止 worker.terminate() // 在子线程中终止自身 self.close() 

//注册共享线程 let worker = new SharedWorker("sharedworker.js"); /**  主线程  **/ worker.port.onmessage = function(e){} worker.port.postMessage('data'); /** 子线程 **/ addEventListener('connect', function(event){ var port = event.ports[0] //接收 port.onmessage = function(event){ console.log(event.data); }; //发送 port.postMessage("data"); port.start(); }); // 在主线程中终止 worker.terminate() // 在子线程中终止自身 self.close() 

worker.addEventListener("error", function(evt){ alert("Line #" + evt.lineno + " - " + evt.message + " in " + evt.filename); }, false); worker.postMessage(10000); }); 

// serviceWorker.js import { register } from 'register-service-worker' if (process.env.NODE_ENV === 'production') { register('service-worker.js', { ready () { console.log( 'App is being served from cache by a service worker.' ) }, registered () { console.log('Service worker has been registered.') }, cached () { console.log('Content has been cached for offline use.') }, updatefound () { console.log('New content is downloading.') }, updated () { console.log('New content is available; please refresh.') window.location.reload(true)   // 这里需要刷新页面 }, offline () { console.log('No internet connection found. App is running in offline mode.') }, error (error) { console.error('Error during service worker registration:', error) } }) } 

plugins: [ new SWPrecacheWebpackPlugin({ cacheId: 'my-project-name', filename: 'service-worker.js', staticFileGlobs: ['dist/**/*.{js,html,css}'], minify: true, stripPrefix: 'dist/' }), new WebpackPwaManifest({ name: 'My Progressive Web App', short_name: 'MyPWA', description: 'My awesome Progressive Web App!', background_color: '#ffffff', crossorigin: 'use-credentials', //can be null, use-credentials or anonymous icons: [ { src: path.resolve('src/assets/icon.png-600'), sizes: [96, 128, 192, 256, 384, 512] // multiple sizes }, { src: path.resolve('src/assets/large-icon.png-600'), size: '1024x1024' // you can also use the specifications pattern } ] }), // ... ] 

import './serviceWorker'