real-time communication

#介紹 PeerJS，WebRTC 庫使用 WebRTC 可能會很困難。PeerJS 是一個很棒的庫，讓 WebRTC 變得更容易。我寫過一篇關於 WebRTC 的文章。那篇文章描述了使用該協議使兩個網頁瀏覽器直接通信的細節。在那篇教程中，我提到了一些抽象了許多細節的庫，以實現 WebRTC 通信。其中一個庫就是 PeerJS，它使實時通信變得非常簡單。首先，您需要一個後端，讓兩個客戶端在能夠直接通信之前進行同步。在一個文件夾中，使用 npm init 初始化一個 npm 項目，使用 npm install peerjs 安裝 PeerJS，然後使用 npx 運行： npx peerjs --port 9000 （運行 npx peerjs --help 查看所有可用的選項）。這就是您的後端 🙂 現在，我們可以創建一個非常簡單的應用程序並發揮一些作用。我們有一個接收器和一個發送器。首先，我們創建接收器，它連接到我們的 PeerJS 服務器，並監聽接收到的數據。new Peer() 的第一個參數是我們的同行名稱，我們稱其為 receiver：包含 PeerJS 客戶端（使用最新可用的庫版本更改）： <script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.16/peer.min.js"></script> 然後，我們初始化 Peer 對象。connection 事件在另一個同行連接到我們時被調用。收到數據後，將調用 data 事件並傳入數據： const peer = new Peer('receiver', { host: 'localhost', port: 9000, path: '/' }) peer....

WebSockets是Web應用程序中HTTP通信的替代方案。它們提供了一個客戶端和服務器之間長期存在的、雙向的通信通道。讓我們來了解如何使用它們來進行網絡交互。 WebSockets是Web應用程序中HTTP通信的替代方案。它們提供了一個客戶端和服務器之間長期存在的、雙向的通信通道。一旦建立，該通道保持打開，提供了非常快速的連接和低延遲和開銷。 WebSockets的瀏覽器支持 WebSockets在所有現代瀏覽器中都得到支持。 WebSockets和HTTP的區別 HTTP是一種非常不同的協議，也是一種不同的通信方式。 HTTP是一種請求/響應協議：當客戶端請求時，服務器返回一些數據。而WebSockets這樣：服務器可以在客戶端不明確請求的情況下向客戶端發送消息客戶端和服務器可以同時交談傳送消息時只需交換非常少的數據開銷。這意味着低延遲通信。 WebSockets非常適合實時和長期存在的通信。 HTTP非常適合偶爾的數據交換和客戶端發起的交互。 HTTP實現起來要簡單得多，而WebSockets則需要更多的開銷。安全的WebSockets 請始終使用安全、加密的WebSockets協議，即wss://。 ws://是不安全的WebSockets版本（WebSockets的http://），出於明顯原因應該避免使用。建立新的WebSockets連接 const url = 'wss://myserver.com/something' const connection = new WebSocket(url) connection是一個WebSocket對象。在連接成功建立時，將觸發open事件。通過將回調函數賦值給connection對象的onopen屬性來監聽它： connection.onopen = () => { //... } 如果出現任何錯誤，將觸發onerror回調函數： connection.onerror = (error) => { console.log(`WebSocket error: ${error}`) } 使用WebSockets將數據發送到服務器一旦連接打開，您可以向服務器發送數據。您可以在onopen回調函數內部輕松地這樣做： connection.onopen = () => { connection.send('hey') } 使用WebSockets從服務器接收數據通過在onmessage上設置回調函數來監聽message事件，當接收到該事件時將調用此函數： connection.onmessage = (e) => { console.log(e.data) } 在Node.js中實現服務器 ws是Node.js的一個流行的WebSockets庫。...