如何使用 Socket.io 建立即時聊天應用程式-js教程-PHP中文網

如何使用 Socket.io 建立即時聊天應用程式

Linda Hamilton

發布： 2024-11-26 20:40:10

原創

861 人瀏覽過

How to Build a Real-Time Chat Application Using Socket.io

在本教學中，我將引導您完成使用 Socket.io 以及 Node.js 和 Express 建立即時聊天應用程式的過程。這是一本適合初學者的指南，它將讓您實際了解即時通訊在 Web 應用程式中的工作原理。我將向您展示如何設定伺服器、建立前端介面以及使用 Socket.io 在客戶端和伺服器之間建立通訊。

您將學到什麼

Socket.io 是什麼以及它是如何運作的
設定基本的 Node.js 伺服器
整合Socket.io進行即時通訊
使用 HTML 和 JavaScript 建立前端
即時發送和接收訊息

先決條件

在開始之前，請確保您已安裝以下軟體：

Node.js：您可以從這裡下載。
npm（節點套件管理員）：它與 Node.js 捆綁在一起，因此如果您安裝了 Node.js，那麼您就已經擁有了 npm。
您也應該對 JavaScript、HTML 和 CSS 有基本的了解。

第 1 步：設定您的項目

讓我們從設定一個新項目開始。

mkdir 即時聊天
cd 即時聊天

初始化一個新的 Node.js 專案：

npm init -y

安裝必要的依賴：我需要 Express 作為伺服器，並需要 Socket.io 來進行即時通訊。

npm install express socket.io

第 2 步：設定後端（Node.js 和 Express）

我將建立一個名為 server.js 的新檔案。該檔案將包含後端程式碼。

建立 server.js 並新增以下程式碼以使用 Socket.io 設定基本 Express 伺服器：

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

// Set up the app
const app = express();
const server = http.createServer(app);
const io = socketIo(server);  // Initialize Socket.io

// Serve static files (for front-end)
app.use(express.static('public'));

// Listen for incoming socket connections
io.on('connection', (socket) => {
    console.log('A user connected');

    // Listen for messages from clients
    socket.on('chat message', (msg) => {
        // Emit the message to all connected clients
        io.emit('chat message', msg);
    });

    // Handle disconnection
    socket.on('disconnect', () => {
        console.log('A user disconnected');
    });
});

// Start the server
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

登入後複製

說明：

我使用 Express 來提供靜態檔案（前端）。
Socket.io 已初始化並偵聽傳入連線。
當使用者透過「聊天訊息」發送訊息時，它會使用 io.emit() 廣播到所有連線的用戶端。
當使用者斷開連線時，伺服器會記錄一則訊息。

第 3 步：設定前端（HTML 和 JavaScript）

現在，我將創建一個簡單的前端，用戶可以在其中發送和接收訊息。

在專案目錄中建立一個名為 public 的資料夾。這將保存您的前端文件。
在公用資料夾中，我將建立一個index.html 檔案。這將是聊天介面。



    
    
    <title>即時聊天</title>
    
        正文 { 字型系列：Arial、無襯線字型； }
        ul { 列表樣式類型：無；填充：0； }
        li { 填滿：8px;邊距：5px 0；背景顏色：#f1f1f1； }
        輸入[類型=“文字”]{寬度：300px；內邊距：10px；邊距：10px 0； }
        按鈕 { 內邊距：10px; }
    風格>
頭>

    <h1>即時聊天應用程式</h1>

登入後複製

說明：