JavaScript >> Javascript 文檔 >  >> Node.js

使用 Node.js 進行實時聊天

在本教程中,我們將使用 Node.js 和 socket.io 庫構建一個實時聊天系統。聊天允許用戶創建他們可以與朋友共享的私人聊天室。對於頭像,我們將使用 gravatar。您可以使用 node 在本地運行聊天,或將其推送到 heroku 或其他雲服務提供商。

代碼

您可以從上面的下載按鈕獲取源代碼。它有很多評論,很容易理解。從 app.js 開始 文件並從那裡讀取。以下是一些需要注意的事項:

  • 所有的依賴都在 package.json 中聲明 文件。它們不包含在 zip 中,您必須運行 npm install 得到它們。
  • 我們使用單獨的 JavaScript 文件進行配置和路由,以使代碼更易於管理。
  • 在路由文件中,socket.io 將人的用戶名、頭像和房間存儲為套接字對象本身的屬性。這為我們節省了大量代碼,並且使管理房間變得容易。
  • 我們使用 socket.io 的聊天室功能將一個聊天與另一個聊天隔離開來,這正是該功能的開發目的。

設計

本教程的 PSD 以及您會喜歡的其他好東西在我們的會員區免費提供。成為這裡的會員!

運行聊天

要運行聊天,您需要安裝 node.js,以便 nodenpm 可以從終端調用命令。下載代碼並將存檔解壓縮到名為 nodejs-private-webchat 的文件夾中。在此之後,導航到您從終端創建的文件夾:

cd nodejs-private-webchat/

運行 ls(或 dir,如果你在 Windows 上)命令應該顯示 app.js , package.json 以及存檔中的其他文件。然後,運行此命令下載聊天系統使用的所有庫:

npm install

這將安裝 package.json 中描述的所有依賴項 .這可能需要一兩分鐘。完成後,運行以下命令開始您自己的本地聊天,您可以在 http://localhost:8080 上看到它

node app.js

點擊 ctrl+c 阻止它。壞消息是你不能邀請你的朋友加入你的聊天,因為它是在你自己的電腦上運行的。要解決此問題,您需要在 Web 服務器上運行它。自己設置一個 web 服務器來運行 node 並不是一個非常簡單的過程,並且需要大量的服務器管理技能。幸運的是,像 Heroku 這樣的雲平台很容易上手,這就是我接下來將向您展示的內容。

在 Heroku 上主持聊天

Heroku 是一個雲託管平台,可自動部署和擴展 Web 應用程序。它提供了一個免費計劃,對於我們聊天等不太繁忙的應用程序來說已經足夠了。這是你需要做的:

  1. 如果您還沒有帳戶,請創建一個帳戶。
  2. 為您的操作系統安裝 heroku 工具帶。它將使您可以訪問 heroku 來自終端窗口的命令。
  3. 初始化一個空的 git 倉庫(解釋如下)
  4. 將您的代碼推送到 heroku。這將部署它並為您提供一個 URL,您可以與您的朋友分享。

您還可以閱讀此入門指南,然後閱讀有關運行 node.js 應用程序的指南。

創建一個 git 倉庫

heroku 工具帶安裝 heroku 命令和 git 版本控制系統。您需要創建一個 git repo 以便能夠將您的應用程序部署到 heroku(這裡沒有 ftp)。為此,請運行以下命令:

git init

然後,我們需要告訴 git 不要包含 node_modules 文件夾到您的倉庫。這個文件夾可以變得非常大,它根本不屬於 git。要忽略該文件夾,請創建一個名為 .gitignore 的新空文本文件 內容如下:

node_modules/

現在您可以將您的代碼提交到您的新倉庫!編寫這些命令:

git add
git commit -m 'Initial commit'

Heroku 希望在您的存儲庫中找到一個特殊文件,以便能夠啟動應用程序。它被稱為 Procfile - 它已在 zip 存檔中為您創建,因此您無需執行任何操作。但如果你好奇,它包含以下命令:

web: node app.js

我們現在可以將應用推送到 Heroku!

推送到 Heroku

以下兩個命令僅在您第一次開始使用 heroku 時執行 效用。首先你需要從命令行工具登錄heroku:

heroku login

然後,您需要添加您的 ssh 密鑰,這樣您就可以在不輸入密碼的情況下推送代碼:

heroku keys:add

接下來,您需要從該文件夾中的代碼創建一個新的 Heroku 應用程序:

heroku create

最後,我們準備好推送代碼了!輸入這個命令:

git push heroku master

此行會將您的應用程序代碼發送到 heroku,他們的服務器將在其中處理您的 package.json 文件並安裝您的應用程序需要的所有庫。每次您需要上傳新版本的代碼時都執行此操作(您必須事先進行了提交)。要在瀏覽器中打開您自己的網絡聊天,請運行以下命令:

heroku open

這將在默認瀏覽器的選項卡中打開它。

希望你喜歡我們的小聊天!

但是還有很多可以改進的地方。您可以使用 HTML5 音頻實現新消息警報,使兩個以上的人可以加入同一個房間,在加入之前要求輸入密碼等等。如果你做了一些很酷的東西,一定要在評論中分享給大家看看:)


Tutorial JavaScript 教程
  1. 生成 Angular 容器組件,快速簡便的方法

  2. 雙重否定運算符 !!用 JavaScript 做什麼?

  3. 使用 now.sh 和基本身份驗證部署靜態 vuepress 站點

  4. 在 JavaScript 中使用 toFixed(2) 會產生不希望的結果

  5. TryShape 簡介:賦予您的創造力一個形狀

  6. 3種使用JS reduce的方法

  7. 修復錯誤:Typescript res.json() 不是函數

  1. Reactivity Anywhere - 沒有虛擬 DOM

  2. 媒體服務器獨立 WebRTC 播放器

  3. JavaScript 不支持帶有局部變量的閉包嗎?

  4. 在 iframe/div 中禁用 JavaScript

  5. substring() 方法

  6. Bourbon Saas 在 Vue CLI 項目中使用 Bourbon (Sass)

  7. 好 VS 壞——超越 JavaScript 控制台

  1. Peppermint(票務管理)Alpha 版來了! 🍵

  2. @testing-library 簡介:第 1 部分

  3. 在 JS 中使用遞歸的奇偶數🚀

  4. 注意`document.activeElement`!