WebSockets啟用用於Web應(yīng)用程序的實(shí)時(shí)，雙向通信。在JavaScript中使用它們：1）使用新的WebSocket（'wss：// your-websocket-server.com'）創(chuàng)建一個(gè)Wearnebocket實(shí)例，並通過(guò)諸如Onopen之類的事件來(lái)處理連接狀態(tài)。 2）使用socket.send（）發(fā)送消息，並使用socket.onmessage接收它們。 3）用OnError和Onclose處理錯(cuò)誤和斷開(kāi)連接，並以指數(shù)向後實(shí)現(xiàn)重新連接邏輯。 4）與socket.close（）正確關(guān)閉連接，以避免洩漏，尤其是在水療中心。

如果您想在Web應(yīng)用程序中構(gòu)建實(shí)時(shí)功能（例如實(shí)時(shí)聊天，通知或協(xié)作工具），Websocket是一個(gè)可靠的選擇。與響應(yīng)後結(jié)束的HTTP請(qǐng)求不同，Websockets在客戶端和服務(wù)器之間保持持續(xù)的連接，從而允許即時(shí)雙向通信。在這篇文章中，我將瀏覽如何使用JavaScript開(kāi)始使用Websocket，從基本設(shè)置到處理消息並優(yōu)雅地重新連接。

在JS中設(shè)置Websocket連接

在客戶端，啟動(dòng)和運(yùn)行WebSocket連接非常簡(jiǎn)單。您只需要?jiǎng)?chuàng)建一個(gè)新的WebSocket實(shí)例，然後將其傳遞給服務(wù)器的URL：

 const socket = new websocket（'wss：// your-websocket-server.com'）;

使用ws://進(jìn)行未加密的連接和wss://用於安全的連接（您應(yīng)該始終以生產(chǎn)為目標(biāo)）。

創(chuàng)建後，Websocket經(jīng)過(guò)一些現(xiàn)成的狀態(tài)：連接，打開(kāi)，關(guān)閉和關(guān)閉。您可以通過(guò)socket.readyState進(jìn)行檢查onopen

 socket.onopen =（）=> {
  console.log（'WebSocket連接已建立'）;
};

您不需要大量的樣板即可開(kāi)始 - 只需連接，收聽(tīng)事件，然後在需要時(shí)發(fā)送數(shù)據(jù)。

發(fā)送和接收消息

Websockets沒(méi)有用，除非他們可以實(shí)際交換數(shù)據(jù)。連接打開(kāi)後，您可以使用.send()方法發(fā)送消息：

 socket.Send（'Hello Server！'）;

在接收端，您使用onmessage處理程序：

 socket.onmessage =（event）=> {
  console.log（'來(lái)自服務(wù)器的消息：'，event.data）;
};

消息可以是文本，JSON字符串，甚至是二進(jìn)制數(shù)據(jù)（例如斑點(diǎn)或數(shù)組緩衝區(qū)）。但是，在大多數(shù)情況下，您將以JSON發(fā)送結(jié)構(gòu)化數(shù)據(jù)：

 //發(fā)送對(duì)象
socket.send（json.stringify（{type：'chat'，消息：'hi waling'}））;

//接受和解析
socket.onmessage =（event）=> {
  const data = json.parse（event.data）;
  console.log（data.type，data.message）;
};

確?？蛻舳撕头?wù)器都同意該格式 - 否則，情況可能會(huì)很快令人困惑。

處理錯(cuò)誤和斷開(kāi)連接

實(shí)時(shí)連接可以出於各種原因而下降 - 網(wǎng)絡(luò)問(wèn)題，服務(wù)器崩潰，超時(shí)。優(yōu)雅地處理這些工作很重要。

要捕獲錯(cuò)誤，請(qǐng)?jiān)O(shè)置一個(gè)onerror處理程序：

 socket.onerror =（error）=> {
  console.log（'WebSocket錯(cuò)誤：'，錯(cuò)誤）;
};

並且對(duì)於斷開(kāi)連接，請(qǐng)使用onclose ：

 socket.onclose =（event）=> {
  console.log（'連接關(guān)閉：'，event.reason）;
};

但是，如果您想自動(dòng)重新連接怎麼辦？這是一個(gè)簡(jiǎn)單的模式：

• 使用標(biāo)誌跟蹤是否已經(jīng)進(jìn)行重新連接。
• 等待短暫的延遲，然後重試，並每次增加（指數(shù)向後）。
• （可選）限制檢索次數(shù)。

例子：

令ReconnectAttEmpts = 0;
const maxretries = 5;

函數(shù)連接（）{
  const socket = new websocket（'wss：// your-websocket-server.com'）;

  socket.onclose =（）=> {
    if（reconnectAttEmpts  {
        重新連接；
        連接（）;
      }，1000 * Math.pow（2，reconnectAttEmpts））;
    }
  };
}

連接（）;

這有助於避免錘擊服務(wù)器，同時(shí)仍可為用戶提供重新連接而無(wú)需刷新頁(yè)面的機(jī)會(huì)。

正確關(guān)閉連接

當(dāng)您不再需要連接時(shí) - 說(shuō)，當(dāng)用戶註銷或?qū)Ш綍r(shí)，請(qǐng)確保明確關(guān)閉它：

 socket.Close（）;

這可以釋放資源並防止內(nèi)存洩漏。如果您要構(gòu)建單頁(yè)應(yīng)用程序（SPA），請(qǐng)記住要清理組件卸載或路線更改時(shí)的WebSocket實(shí)例。

另外，避免不必要地創(chuàng)建多個(gè)Websocket實(shí)例。除非您有單獨(dú)的服務(wù)或協(xié)議可以與之通信，否則單個(gè)連接通常就足夠了。

基本上就是這樣。 Websockets一開(kāi)始似乎很棘手，尤其是如果您習(xí)慣了請(qǐng)求響應(yīng)模式，但是一旦您掌握了打開(kāi)連接，發(fā)送/接收消息和處理斷開(kāi)連接的懸而未決，它就會(huì)變得非常直觀。還有諸如socket.io或Signalr之類的庫(kù)會(huì)添加額外的圖層（例如後備運(yùn)輸和房間），但是知道RAW Webockockets的工作方式為您提供了更好的基礎(chǔ)，可以理解和調(diào)試這些高級(jí)工具。

以上是與Websocket的實(shí)時(shí)通信：動(dòng)手JS綜述的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！