利用Node.js實現即時通訊功能的Web項目-js教程-PHP中文網

Welcome to the Chat Room!

首頁

web前端

js教程

利用Node.js實現即時通訊功能的Web項目

PHPz

Nov 08, 2023 am 11:38 AM

nodejs 即時通訊 web項目

利用Node.js實現即時通訊功能的Web項目

隨著網路的快速發展，即時通訊功能變得越來越普遍。無論是社群網路、電子商務、線上遊戲等，都需要實現即時通訊功能，以提高使用者體驗和效率。 Node.js作為一個高效且適用於並發請求的JavaScript運行環境，為快速建立即時通訊功能的網路應用程式提供了很好的支援。

本文將詳細介紹如何利用Node.js實作一個基於Web的即時通訊功能。本專案基於WebSocket協議，不使用傳統的輪詢或長輪詢技術。 WebSocket技術的優點是可以實現服務端和客戶端之間的即時雙向通訊，而且對於跨域請求也有良好的支援。

技術選型

我們將使用以下這些技巧來開發這個即時通訊功能：

Node.js：我們將使用Node.js作為伺服器端的運作環境。
Express：我們將使用Express框架來開發網路應用程式。
Socket.IO：Socket.IO是一個基於WebSocket和輪詢的跨平台即時通訊引擎，它相容於不同的瀏覽器和行動裝置。
MongoDB：我們將使用MongoDB作為資料儲存。
Bootstrap：我們將使用Bootstrap框架來建立使用者介面。

建立專案框架

先建立一個專案資料夾，進入該目錄，然後執行下面這些指令：

npm init
npm install express socket.io mongodb --save

登入後複製

上面這些指令將建立一個新的Node.js項目，然後安裝需要的依賴函式庫。

第一步是在專案根目錄下建立一個新的JavaScript檔案。在本案例中，我們將該檔案命名為server.js。然後將下面的程式碼複製到server.js檔案中。

const express = require('express');
const app = express();
const http = require('http').Server(app);

// TODO：编写代码来启动Socket.IO服务

app.use(express.static('public'));

http.listen(3000, () => {
  console.log('listening on *:3000');
});

登入後複製

上面這段程式碼引入了Express框架，創建了一個HTTP伺服器對象，並監聽3000連接埠。這裡牽涉到Socket.IO的初始化和啟動，後面將會講到。同時，express.static()被用於程式靜態資料夾的存取設定。

設定MongoDB

執行下面的指令來安裝MongoDB：

npm install mongodb --save

登入後複製

在專案根目錄下建立一個新的名為mongo.js的JS文件，然後加入下面的程式碼來設定和執行MongoDB。

const MongoClient = require('mongodb').MongoClient;

// Connection URL
const url = 'mongodb://localhost:27017';
// Database Name
const dbName = 'chatDB';
// Use connect method to connect to the server
MongoClient.connect(url, function (err, client) {
  console.log('Connected successfully to mongodb server');

  const db = client.db(dbName);
  client.close();
});

登入後複製

在該檔案中，我們使用MongoDB官方提供的MongoClient物件連接到MongoDB伺服器。 MongoClient使用URL連接到mongod實例，並且它將dbName作為參數執行操作。執行mongo.js後，如果您看到類似「Successfully connected to MongoDB server」這樣的訊息，則表示您已經成功連線到MongoDB。

啟動Socket.IO服務

為了啟動Socket.IO服務，我們會在剛才的server.js檔案中加入以下程式碼：

const express = require('express');
const app = express();
const http = require('http').Server(app);

const io = require('socket.io')(http);
io.on('connection', function (socket) {
  console.log('a user connected');
  socket.on('disconnect', function () {
    console.log('user disconnected');
  });
});

app.use(express.static('public'));

http.listen(3000, () => {
  console.log('listening on *:3000');
});

登入後複製

上面程式碼從socket.io模組匯入並建立了一個實例，然後設定了連線事件。連線事件在客戶端連線到Socket.IO伺服器時觸發。我們已經在連接事件中添加了一些日誌輸出，以便我們在伺服器控制台上能夠知道有多少用戶連接到了我們的Socket.IO伺服器。

建立客戶端

現在我們將開始建立客戶端。在public資料夾中，建立一個名為index.html的文件，然後加入下面的程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>Node.js Chat App</title>
  </head>
  <body>
    <h1 id="Welcome-to-the-Chat-Room">Welcome to the Chat Room!</h1>
    <div id="messages"></div>
    <form id="chat-form" action="#">
      <input id="message" type="text" placeholder="Type message" />
      <button type="submit">Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script src="/client.js"></script>
  </body>
</html>

登入後複製

在上面的程式碼中，我們建立了一個簡單的user interface（使用者介面）來傳送和接收即時訊息。使用者介面主要由三個部分組成：

一個用於顯示聊天訊息的
元素。
一個表單，使用者可以使用該表單來傳送訊息。
兩個

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前 By DDD

如何修復KB5055523無法在Windows 11中安裝？
2 週前 By DDD

Inzoi：如何申請學校和大學
4 週前 By DDD

如何修復KB5055518無法在Windows 10中安裝？
2 週前 By DDD

在哪裡可以找到Atomfall中的站點辦公室鑰匙
4 週前 By DDD

顯示更多

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡

7868

15

Java教學

1649

14

CakePHP 教程

1407

52

Laravel 教程

1301

25

PHP教程

1243

29

顯示更多

Related knowledge

eclipse的專案儲存位置 May 05, 2024 pm 07:36 PM

Eclipse專案的儲存位置取決於專案類型和工作區設定。 Java專案：儲存在工作區內的專案資料夾中。 Web專案：儲存在工作區內的專案資料夾內，分為多個子資料夾。其他項目類型：文件儲存在工作區內的項目資料夾內，組織方式可能因項目類型而異。工作區位置預設位於“<家目錄>/workspace”，可透過Eclipse首選項進行變更。若要修改專案儲存位置，可右鍵點選項目並選擇「屬性」中的「資源」標籤進行修改。

nodejs是後端框架嗎 Apr 21, 2024 am 05:09 AM

Node.js 可作為後端框架使用，因為它提供高效能、可擴展性、跨平台支援、豐富的生態系統和易於開發等功能。

nodejs怎麼連接mysql資料庫 Apr 21, 2024 am 06:13 AM

要連接 MySQL 資料庫，需要遵循以下步驟：安裝 mysql2 驅動程式。使用 mysql2.createConnection() 建立連接對象，其中包含主機位址、連接埠、使用者名稱、密碼和資料庫名稱。使用 connection.query() 執行查詢。最後使用 connection.end() 結束連線。

nodejs中的全域變數有哪些 Apr 21, 2024 am 04:54 AM

Node.js 中存在以下全域變數：全域物件：global核心模組：process、console、require執行階段環境變數：__dirname、__filename、__line、__column常數：undefined、null、NaN、Infinity、-Infinity

nodejs安裝目錄裡的npm與npm.cmd檔有什麼差別 Apr 21, 2024 am 05:18 AM

Node.js 安裝目錄中有兩個與 npm 相關的文件：npm 和 npm.cmd，區別如下：擴展名不同：npm 是可執行文件，npm.cmd 是命令視窗快捷方式。 Windows 使用者：npm.cmd 可以在命令提示字元中使用，npm 只能從命令列執行。相容性：npm.cmd 特定於 Windows 系統，npm 跨平台可用。使用建議：Windows 使用者使用 npm.cmd，其他作業系統使用 npm。

nodejs和java的差別大嗎 Apr 21, 2024 am 06:12 AM

Node.js 和 Java 的主要差異在於設計和特性：事件驅動與執行緒驅動：Node.js 基於事件驅動，Java 基於執行緒驅動。單執行緒與多執行緒：Node.js 使用單執行緒事件循環，Java 使用多執行緒架構。執行時間環境：Node.js 在 V8 JavaScript 引擎上運行，而 Java 在 JVM 上運行。語法：Node.js 使用 JavaScript 語法，而 Java 使用 Java 語法。用途：Node.js 適用於 I/O 密集型任務，而 Java 適用於大型企業應用程式。