web前端實時通信的方式是什么

這篇“web前端實時通信的方式是什么”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“web前端實時通信的方式是什么”文章吧。

1.短輪詢

短輪詢的原理很簡單，每隔一段時間客戶端就發出一個請求，去獲取服務器最新的數據，一定程度上模擬實現了即時通訊。

• 優點：兼容性強，實現非常簡單

• 缺點：延遲性高，請求中有大半是無用，非常消耗帶寬和服務器資源，影響性能

• 應用： 二維碼掃碼確認、信息通知

• 實現方式：
  借用定時器實現短輪詢

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)
		}
	})
}

2.comet(長輪詢、長連接)

comet有兩種主要實現手段，一種是基于 AJAX 的長輪詢（long-polling）方式，另一種是基于 Iframe 及 htmlfile 的流（streaming）方式，通常被叫做長連接。
具體兩種手段的操作方法請移步Comet技術詳解：基于HTTP長連接的Web端實時通信技術

2.1、長輪詢

客戶端向服務器發送Ajax請求，服務器接到請求后hold住連接，直到有新消息才返回響應信息并關閉連接，客戶端處理完響應信息后再向服務器發送新的請求。

• 優點：兼容性好，在無消息的情況下不會頻繁的請求，資源浪費較小

• 缺點：服務器hold連接會消耗資源，返回數據順序無保證，難于管理維護

• 應用： webQQ、開心網、校內，Hi網頁版、Facebook IM等等

• 實現方式：
  主要由后端hold住連接，我們就是正常的發送請求即可

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

正常來說我們前端會設置請求超時時間，那么我們就和后端約定，在超時范圍內必須返回結果在前端即可。

2.2、長連接

在頁面里嵌入一個隱蔵iframe，將這個隱蔵iframe的src屬性設為對一個長連接的請求或是采用xhr請求，服務器端就能源源不斷地往客戶端輸入數據。 此方法已經過時，我推薦使用，畢竟現在都已經放棄iframe

• 優點：兼容性好，消息即時到達，不發無用請求

• 缺點：服務器維護長連接消耗資源

• 實例：Gmail聊天

• 實現方式：

//在vue中嵌入iframe
<iframe ref="iframe" v-show="iframeShow"></iframe>

watchIframe(){
	//先找到iframe的窗口
	this.iframeWin = this.$refs.iframe.contentWindow;
	//向iframe發送信息,大括號內是發送的內容;
	this.iframeWin.postMessage(
	     { 
	
	      },"*"
	);
	//怎樣監聽iframe傳過來的信息
	window.addEventListener("message", this.handleMessage);
	//獲取iframe傳過來的信息
	handleMessage(res){
	  //res為傳過來的信息
	 ...//渲染頁面
	}
}

3.SSE 使用指南請看Server-Sent Events 教程

SSE（Server-Sent Event，服務端推送事件）是一種允許服務端向客戶端推送新數據的HTML5技術

• 優點：基于HTTP而生，因此不需要太多改造就能使用，使用方便，而websocket非常復雜，必須借助成熟的庫或框架

• 缺點：基于文本傳輸效率沒有websocket高，不是嚴格的雙向通信，客戶端向服務端發送請求無法復用之前的連接，需要重新發出獨立的請求，并且不兼容IE

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();

我們也可以自定義事件，Server-Sent Events 教程里都有明確的使用方法

4.Websocket

Websocket是一個全新的、獨立的協議，基于TCP協議，與http協議兼容、卻不會融入http協議，僅僅作為html5的一部分，其作用就是在服務器和客戶端之間建立實時的雙向通信。

• 優點：真正意義上的實時雙向通信，性能好，低延遲

• 缺點：獨立與http的協議，因此需要額外的項目改造，使用復雜度高，必須引入成熟的庫，無法兼容低版本瀏覽器

• 實現方式：

瀏覽器為 HTTP 通信提供了 XMLHttpRequest 對象，同樣的，也為 WebSocket 通信提供了一個通信操作接口：WebSocket。

 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("連接已關閉.");
  }

5.Web Worker

Web Worker 的作用，就是為 JavaScript 創造多線程環境，允許主線程創建 Worker 線程，將一些任務分配給后者運行

• 優點：實現多線程環境，擺脫了js的單線程

• 缺點：無法訪問DOM節點；無法訪問全局變量或是全局函數；無法調用alert()或者confirm之類的函數；無法訪問window、document之類的瀏覽器全局變量；
  注意：Web Worker中的Javascript依然可以使用setTimeout(),setInterval()之類的函數，也可以使用XMLHttpRequest對象來做Ajax通信

• 實例：大數據的處理；高頻的用戶交互：

• 實現方式：

Web workers可分為兩種類型：專用線程、共享線程。
專用線程隨當前頁面的關閉而結束；這意味著專用線程只能被創建它的頁面訪問。
與之相對應的共享線程可以被多個頁面訪問。

5.1、專用線程

使用 onmessage() ， postmessage()通信

/** 主線程 **/
//注冊專用線程
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()

5.2、共享線程

SharedWorker需要用到port屬性，接收需要先connect

//注冊共享線程
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()

兩種方式的錯誤監聽同SSE一樣

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

6.Service workers

Service workers 本質上充當Web應用程序與瀏覽器之間的代理服務器，也可以在網絡可用時作為瀏覽器和網絡間的代理，創建有效的離線體驗。 它是 Web Worker 的一個類型

• 優點：可以秒開或者離線訪問

• 缺點：IE11 、Opera Mini 、IOS不支持

• 應用：推送通知 —?允許用戶選擇從網絡應用程序及時更新。

• 實現方式：

// 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 加入

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'),
          sizes: [96, 128, 192, 256, 384, 512] // multiple sizes
        },
        {
          src: path.resolve('src/assets/large-icon.png'),
          size: '1024x1024' // you can also use the specifications pattern
        }
      ]
    }),
    // ...
]

這個時候打包出來的代碼根目錄里面多了個 service-worker.js ，html文件里面 pwa 相關元素也加上了。
在入口 main.js 引入該文件：

import './serviceWorker'

7、Flash Socket

在頁面中內嵌入一個使用了Socket類的 Flash 程序JavaScript通過調用此Flash程序提供的Socket接口與服務器端的Socket接口進行通信，JavaScript在收到服務器端傳送的信息后控制頁面的顯示。 一般用在網絡游戲中，web端基本不適用，加上早在 2017 年 7 月，Flash 的娘家 Adobe 已宣布在 2020年 底終止對 Flash 的支持。各個瀏覽器也在2020年底左右終止對 Flash 的支持

• 優點：實現真正的即時通信，而不是偽即時。

• 缺點：客戶端必須安裝Flash插件；非HTTP協議，無法自動穿越防火墻。

• 實例：網絡互動游戲。

• 實現方式：因為都已經拋棄了，加上我并非游戲類前端，我就沒了解Flash實現方式，有興趣的小伙伴可以自行去研究一下

以上就是關于“web前端實時通信的方式是什么”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。