peerjs

#介紹 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....

如何將React應用連接到相同源的後端

如何從同一個源中提供React應用和後端應用,而無需在服務器上使用CORS並擔心端口的問題。 我認為最常用的啟動React應用的方式是使用create-react-app命令,這非常方便。 你可能會遇到的問題之一是如何將React應用與您已經擁有的後端應用程式或您可能想要創建的後端應用程式連接起來。 開發過程中 在開發應用程序時,您希望利用熱加載和其他便利的功能。那麼如何在不使用CORS並擔心端口的情況下將其與後端結合起來呢? 本文將以Express框架提供示例,但這個方法也適用於其他框架。 假設您正在進行測試,那麼讓我們創建一個React應用: npx create-react-app testing 然後 cd testing 現在,在server.js文件中創建一個簡單的Express服務器,您可以將其添加到任何位置,甚至可以是一個單獨的文件夾。 如果您選擇將此文件添加到create-react-app應用程式代碼中,請運行: npm install express 然後,添加以下簡單的Express設置: const express = require('express'); const app = express(); app.get('/hey', (req, res) => res.send('ho!')) app.listen(8080) 關鍵點:打開package.json文件,並將以下代碼添加到其中的某個位置: "proxy": "http://localhost:8080" 這告訴React將API請求代理到使用Express構建的Node.js服務器。 現在使用node server.js運行此Node.js進程。在另一個窗口中,使用npm start啟動CRA應用。 當瀏覽器在端口3000上打開時(默認情況下),在DevTools中執行以下代碼: fetch('/hey') 如果檢查網絡面板,您應該可以看到成功的響應以及ho!消息。 在生產環境中 在生產環境中,當您準備好部署時,您將運行npm run build來編譯React應用程序,並使用Express服務器來提供這些靜態文件。 整個代理的設置在生產環境中是無用的(它也無法正常工作,它只用於開發)。因此,如果您認為方便,可以將其保留在package.json文件中。 在以下代碼中,我們使用了path內置的Node模塊,並告訴應用程序提供React應用的靜態編譯版本: const express = require('express') const path = require('path') const app = express() app.use(express.static(path.join(__dirname, 'build'))) app.get('/ping', (req, res) => { return res.send('pong') }) app....

為什麼你應該在下一個專案中使用Node.js?

在什麼情況下使用Node.js是一個好主意?為什麼選擇Node.js而不是其他解決方案?本文旨在回答這個問題。 在建立任何類型的軟件時,都有大量的Node.js替代方案。 為什麼Node.js是一個好選擇? 在本文中,我將告訴你一些使用它的好理由。 Node.js是JavaScript JavaScript可能是世界上最受歡迎的編程語言。 JavaScript是唯一一種可以運行在Web瀏覽器中的語言,這使得它比任何其他語言都具有獨特的優勢。 隨著React Native、Electron和類似的解決方案的崛起,它也是唯一一種可以用來創建網絡應用、前端和後端、手機應用、桌面應用的語言。 它非常通用,一旦你在某個領域掌握了JavaScript語言,你的技能可以很容易地轉移到另一個領域,你只需要學習環境的差異(例如,如何使用React Native而不是Electron,或者DOM)。 這是你在其他地方找不到的。 此外,JavaScript是一門非常出色和靈活的語言。 如果你已經因為在瀏覽器中工作而熟悉JavaScript,那麼選擇Node.js就是显而易见的。 Node.js是事件驅動和單線程的 這是什麼意思?簡單來說,它可以很好地處理大量的負載。 每個Node.js程序都可以處理大量的並發連接,由於其非阻塞的I/O特性,仍然非常快速。 這意味著你擁有一切必要的工具來構建一個非常高效的系統。 Node.js非常受歡迎 這帶來了一些副作用。 首先,你會發現在線上討論任何類型的問題時都能找到解決方案。社區非常龐大且樂於助人。 它很容易入門,並且有很多可以學習的資源。 其次,有一個庫可以解決任何問題。 npm庫中有大量可以隨時使用的庫,只需運行一個簡單的npm install命令即可。 由於其受歡迎程度,一個惡性循環形成:你最喜歡的API可能只提供一個官方的Node.js庫,而其他語言可能根本就不被考慮,只能使用非官方的軟件包(質量不一)。 你可以輕鬆部署Node.js應用 有些編程環境需要專用的設置,即使是簡單的項目也是如此,因為沒有人為它們建立生態系統。 Heroku以簡化Rails應用程序開發而聞名,如今在Node.js中我們也有其他可比擬的解決方案。 我考慮的是Zeit Now。 當我需要一個能夠輕鬆設置一個示例Node.js應用程序並與世界共享的場所時,我會想到Glitch(提示:它也可以運行私有應用程序)。