nodejs實作單聊功能-前端問答-PHP中文網

nodejs實作單聊功能

WBOY

發布： 2023-05-28 11:01:09

原創

584 人瀏覽過

Node.js實作單聊功能

Node.js是一種基於Chrome的V8引擎的JavaScript運行環境，可以讓JavaScript在伺服器端運作。使用Node.js，我們可以輕鬆地建立高效能、可擴展的網路應用程式。

在本文中，我們將使用Node.js實作一個簡單的單聊功能，也就是兩個使用者之間的即時聊天。

需要用到的工具與技術：

Node.js
#Express框架
#Socket.IO

建立專案

首先，我們需要建立一個新的Node.js專案。可以使用npm init命令來初始化項目，或使用任何其他方式來建立項目資料夾。

安裝相依性

接下來，我們需要安裝Express和Socket.IO函式庫。在專案資料夾中開啟命令列，輸入以下命令：

npm install express socket.io --save

登入後複製

這將安裝Express和Socket.IO庫並將它們新增至package.json檔案中。

建立伺服器

在專案資料夾中，建立一個名為server.js的文件，這是我們的主伺服器檔案。新增以下程式碼：

const express = require('express');
const app = express();

const server = app.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

登入後複製

這將建立一個Express應用程序，並將其綁定到3000連接埠上。現在，我們可以測試伺服器是否正常運行，打開瀏覽器並訪問http://localhost:3000。如果一切正常，應該會看到一條「Cannot GET /」的訊息，這是因為我們還沒有為應用程式添加任何路由。

建立聊天室

現在，我們需要建立一個聊天室，實現兩個不同使用者之間的即時聊天功能。為此，我們可以使用Socket.IO庫來處理即時事件和通訊。

首先，我們需要在server.js檔案中加入以下程式碼：

const io = require('socket.io')(server);

io.on('connection', (socket) => {
  console.log('A user connected');

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

登入後複製

這將建立一個Socket.IO實例，並將其綁定到已有的HTTP伺服器上。當有一個新的連接時，回呼函數會輸出一條'A user connected'訊息。當連線中斷時，回呼函數會輸出一條'A user disconnected'訊息。

現在，我們可以在聊天室中新增發送和接收訊息的功能。為此，我們可以使用Socket.IO的emit()方法和on()方法。

在server.js檔案中加入以下程式碼：

io.on('connection', (socket) => {
  console.log('A user connected');

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

  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });
});

登入後複製

這將允許使用者傳送訊息，並將訊息廣播到所有連線的用戶端。

建立客戶端

現在，我們需要使用一個簡單的HTML和JavaScript頁面來連接到Socket.IO伺服器，並實現發送和接收訊息的功能。在專案資料夾中，建立一個名為index.html的新文件，並加入以下程式碼：

<!DOCTYPE html>
<html>
<head>
  <title>Node.js Chat</title>
</head>
<body>
  <ul id="messages"></ul>
  <form id="message-form">
    <input type="text" id="input-message" autocomplete="off" />
    <button>Send</button>
  </form>
  <script src="/socket.io/socket.io.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(function () {
      const socket = io();
      $('#message-form').submit(function(e) {
        e.preventDefault(); // prevents page reloading
        const message = $('#input-message').val();
        socket.emit('chat message', message);
        $('#input-message').val('');
        return false;
      });
      socket.on('chat message', function(msg) {
        $('#messages').append($('<li>').text(msg));
      });
    });
  </script>
</body>
</html>

登入後複製

在這個HTML檔案中，我們使用了jQuery函式庫來簡化DOM操作。它包含了一個輸入框和一個“Send”按鈕，以及一個

在JavaScript部分，我們使用了Socket.IO的client-side庫來建立一個連接到伺服器的Socket.IO實例，並在使用者提交表單後向伺服器發送訊息。當客戶端收到來自伺服器的新訊息時，它將在頁面上新增一個清單項目。