Socket.IO 快速指南

上一頁
下一頁

Socket.IO - 概述

Socket.IO 是一個用於即時 Web 應用的 JavaScript 庫。它使 Web 客戶端和伺服器之間能夠進行即時、雙向通訊。它包含兩部分——在瀏覽器中執行的客戶端庫和用於 node.js 的伺服器端庫。這兩個元件具有相同的 API。

即時應用

即時應用 (RTA) 是一種在使用者感知為即時或當前的時間段內執行的應用程式。

一些即時應用程式的示例包括：

  • 即時通訊軟體——例如 WhatsApp、Facebook Messenger 等聊天應用。您無需重新整理應用/網站即可接收新訊息。

  • 推送通知——當有人在 Facebook 上標記您時，您會立即收到通知。

  • 協作應用程式——例如 Google Docs，允許多人同時更新同一文件並將更改應用於所有人的例項。

  • 線上遊戲——例如反恐精英、使命召喚等遊戲，也是即時應用程式的一些示例。

為什麼選擇 Socket.IO？

使用流行的 Web 應用堆疊（如 LAMP (PHP)）編寫即時應用程式傳統上非常困難。它涉及輪詢伺服器以查詢更改，跟蹤時間戳，並且速度比應有的速度慢得多。

套接字傳統上是大多數即時系統構建的解決方案，它在客戶端和伺服器之間提供雙向通訊通道。這意味著伺服器可以將訊息推送到客戶端。每當發生事件時，伺服器都會獲取它並將其推送到相關連線的客戶端。

Socket.IO 非常流行，微軟 Office、Yammer、Zendesk、Trello 等眾多組織都使用它來構建強大的即時系統。它是GitHub 上最強大的JavaScript 框架之一，也是最依賴的 NPM（Node 包管理器）模組。Socket.IO 還擁有龐大的社群，這意味著很容易找到幫助。

ExpressJS

我們將使用 Express 構建 Socket.IO 將與之協同工作的 Web 伺服器。可以使用任何其他 Node 伺服器端框架，甚至 Node HTTP 伺服器。但是，ExpressJS 使定義路由和其他內容變得容易。要了解更多關於 Express 的資訊並對其有一個基本的瞭解，請訪問 – ExpressJS 教程。

Socket.IO - 環境配置

要開始使用Socket.IO進行開發，您需要安裝Node和npm（Node 包管理器）。如果您沒有這些，請訪問Node 設定以在您的本地系統上安裝 Node。透過在終端中執行以下命令來確認 Node 和 npm 是否已安裝。

node --version
npm --version

您應該獲得類似於以下的輸出：

v14.17.0

6.14.13 開啟您的終端，並在終端中輸入以下內容以建立一個新資料夾並輸入以下命令：

$ mkdir test-project
$ cd test-proect
$ npm init

它會問你一些問題；請按以下方式回答：

Environment Setup

這將建立一個'package.json node.js'配置檔案。現在我們需要安裝Express和Socket.IO。要安裝這些並將它們儲存到package.json 檔案，請在您的終端中，進入專案目錄輸入以下命令：

npm install --save express socket.io

最後一件事情是，我們應該不斷重新啟動伺服器。當我們進行更改時，我們需要一個名為nodemon的工具。要安裝 nodemon，請開啟您的終端並輸入以下命令：

npm install -g nodemon

每當您需要啟動伺服器時，請勿使用node app.js，而應使用nodemon app.js。這將確保您無需在更改檔案時重新啟動伺服器。它加快了開發過程。

現在，我們已經設定好了開發環境。現在讓我們開始使用 Socket.IO 開發即時應用程式。

Socket.IO - Hello world

在下一章中，我們將討論使用 Socket.IO 庫和 ExpressJS 的基本示例。

示例

首先，建立一個名為app.js的檔案，並輸入以下程式碼以設定 Express 應用程式：

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

app.get('/', function(req, res){
   res.sendFile('E:/test/index.html');
});

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

我們需要一個index.html檔案來提供服務，建立一個名為 index.html 的新檔案，並在其中輸入以下程式碼：

<!DOCTYPE html>
<html>
   <head><title>Hello world</title></head>
   <body>Hello world</body>
</html>

要測試它是否有效，請轉到終端並使用以下命令執行此應用程式：

nodemon app.js

這將在 localhost:3000 上執行伺服器。轉到瀏覽器並輸入 localhost:3000 進行檢查。如果一切順利，頁面上將列印一條訊息“Hello World”。

以下是另一個示例（這需要 Socket.IO），每當使用者訪問此頁面時，它都會記錄“使用者已連線”，每當有人離開/關閉此頁面時，它都會記錄“使用者已斷開連線”。

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){ res.sendFile('E:/test/index.html');
});

//Whenever someone connects this gets executed
io.on('connection', function(socket){
   console.log('A user connected');
   
   //Whenever someone disconnects this piece of code executed
   socket.on('disconnect', function () {
      console.log('A user disconnected');
   });
});
http.listen(3000, function(){
   console.log('listening on *:3000');
});

require('socket.io')(http) 建立一個附加到 http 伺服器的新 socket.io 例項。io.on 事件處理程式使用 socket 物件處理其中的連線、斷開連線等事件。

我們已設定伺服器以在連線和斷開連線時記錄訊息。我們現在必須包含客戶端指令碼並在其中初始化 socket 物件，以便客戶端可以在需要時建立連線。該指令碼由我們的 io 伺服器在'/socket.io/socket.io.js'處提供。

完成上述過程後，index.html 檔案將如下所示：

<!DOCTYPE html>
<html>
   <head><title>Hello world</title></head>
   <script src="/socket.io/socket.io.js"></script>
   <script>
      var socket = io();
   </script>
   <body>Hello world</body>
</html>

如果您現在轉到 localhost:3000（確保您的伺服器正在執行），您將在瀏覽器中看到列印的Hello World。現在檢查您的伺服器控制檯日誌，它將顯示以下訊息：

A user connected

如果您重新整理瀏覽器，它將斷開 socket 連線並重新建立。您可以在控制檯日誌中看到以下內容：

A user connected
A user disconnected
A user connected

Socket.IO - 事件處理

Sockets 基於事件工作。有一些保留事件，可以使用伺服器端的 socket 物件訪問這些事件。

它們是：

  • 連線
  • 訊息
  • 斷開連線
  • 重新連線
  • Ping
  • 加入和
  • 離開。

客戶端 socket 物件還為我們提供了一些保留事件，它們是：

  • 連線
  • Connect_error
  • Connect_timeout
  • Reconnect 等。

現在，讓我們看一個使用 SocketIO 庫處理事件的示例。

示例 1

In the Hello World example, we used the connection and disconnection events to
log when a user connected and left. Now we will be using the message event to
pass message from the server to the client. To do this, modify the io.on
('connection', function(socket)) as shown below –var app =
require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
   res.sendFile('E:/test/index.html');
});
 
io.on('connection', function(socket){
   console.log('A user connected');
 
   // Send a message after a timeout of 4seconds
   setTimeout(function(){
      socket.send('Sent a message 4seconds after connection!');
   }, 4000);
   socket.on('disconnect', function () {
      console.log('A user disconnected');
   });
});
http.listen(3000, function(){
   console.log('listening on *:3000');
});

這將在客戶端連線四秒鐘後向我們的客戶端傳送一個名為message（內建）的事件。socket 物件上的 send 函式與 'message' 事件關聯。

現在，我們需要在客戶端處理此事件，為此，請將 index.html 頁面的內容替換為以下內容：

<!DOCTYPE html>
<html>
   <head><title>Hello world</title></head>
   <script src="/socket.io/socket.io.js"></script>
   <script>
      var socket = io();
      socket.on('message', function(data){document.write(data)});
   </script>
   <body>Hello world</body>
</html>

我們現在正在客戶端處理“message”事件。當您現在在瀏覽器中訪問該頁面時，您將看到以下螢幕截圖。

Events Before

4 秒鐘後伺服器傳送 message 事件後，我們的客戶端將處理它併產生以下輸出：

Events After

注意——我們在這裡傳送了一段文字字串；我們也可以在任何事件中傳送物件。

Message 是 API 提供的內建事件，但在實際應用中並沒有多大用處，因為我們需要能夠區分事件。

為了允許這樣做，Socket.IO 使我們能夠建立自定義事件。您可以使用socket.emit函式建立和觸發自定義事件。以下程式碼發出一個名為testerEvent的事件：

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
   res.sendFile('E:/test/index.html');
});
   
io.on('connection', function(socket){
   console.log('A user connected');
   // Send a message when
   setTimeout(function(){
      // Sending an object when emmiting an event
      socket.emit('testerEvent', { description: 'A custom event named testerEvent!'});
   }, 4000);
   socket.on('disconnect', function () {
      console.log('A user disconnected');
   });
});
http.listen(3000, function(){
   console.log('listening on localhost:3000');
});

要在客戶端處理此自定義事件，我們需要一個監聽 testerEvent 事件的監聽器。以下程式碼在客戶端處理此事件：

<!DOCTYPE html>
<html>
   <head><title>Hello world</title></head>
   <script src="/socket.io/socket.io.js"></script>
   <script>
      var socket = io();
      socket.on('testerEvent', function(data){document.write(data.description)});
   </script>
   <body>Hello world</body>
</html>

這將與我們之前的示例一樣工作，在這種情況下，事件為 testerEvent。當您開啟瀏覽器並轉到 localhost:3000 時，您將看到：

Hello world

四秒鐘後，將觸發此事件，瀏覽器將文字更改為：

A custom event named testerEvent!

示例 2

我們也可以從客戶端發出事件。要從客戶端發出事件，請使用 socket 物件上的 emit 函式。

<!DOCTYPE html>
<html>
   <head><title>Hello world</title></head>
   <script src="/socket.io/socket.io.js"></script>
   <script>
      var socket = io();
      socket.emit('clientEvent', 'Sent an event from the client!');
   </script>
   <body>Hello world</body>
</html>

要處理這些事件，請在伺服器上的 socket 物件上使用on 函式。

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
   res.sendFile('E:/test/index.html');
});
io.on('connection', function(socket){
   socket.on('clientEvent', function(data){
      console.log(data);
   });
});

http.listen(3000, function(){
   console.log('listening on localhost:3000');
});

因此，現在如果我們轉到 localhost:3000，我們將得到一個名為clientEvent的自定義事件被觸發。此事件將由伺服器透過記錄以下內容來處理：

Sent an event from the client!

Socket.IO - 廣播

廣播意味著向所有已連線的客戶端傳送訊息。廣播可以在多個級別進行。我們可以向所有已連線的客戶端傳送訊息，向名稱空間上的客戶端傳送訊息，以及向特定房間中的客戶端傳送訊息。要向所有客戶端廣播事件，我們可以使用io.sockets.emit方法。

注意——這將向所有已連線的客戶端發出事件（甚至可能是觸發此事件的套接字）。

在此示例中，我們將向所有使用者廣播已連線客戶端的數量。更新app.js檔案以包含以下內容：

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
   res.sendFile('E:/test/index.html');
});
   
var clients = 0;

io.on('connection', function(socket){
   clients++;
   io.sockets.emit('broadcast',{ description: clients + ' clients connected!'});
   socket.on('disconnect', function () {
      clients--;
      io.sockets.emit('broadcast',{ description: clients + ' clients connected!'});
   });
});

http.listen(3000, function(){
   console.log('listening on localhost:3000');
});

在客戶端，我們只需要處理廣播事件：

<!DOCTYPE html>
<html>
   <head><title>Hello world</title></head>
   <script src="/socket.io/socket.io.js"></script>
   <script>
      var socket = io();
      socket.on('broadcast',function(data){
         document.body.innerHTML = '';
         document.write(data.description);
      });
   </script>
   <body>Hello world</body>
</html>

如果您連線四個客戶端，您將獲得以下結果：

Broadcast All

這是向所有人傳送事件。現在，如果我們想向所有人傳送事件，但不是導致該事件的客戶端（在上一個示例中，它是新客戶端連線導致的），我們可以使用socket.broadcast.emit。

讓我們向新使用者傳送歡迎訊息，並向其他使用者廣播他/她加入的訊息。因此，在您的 app.js 檔案中，在客戶端連線時向他傳送歡迎訊息，並將已連線客戶端數量廣播給其他人。

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
   res.sendFile('E:/test/index.html');
});
var clients = 0;

io.on('connection', function(socket){
   clients++;
   socket.emit('newclientconnect',{ description: 'Hey, welcome!'});
   socket.broadcast.emit('newclientconnect',{ description: clients + ' clients connected!'})
   socket.on('disconnect', function () {
      clients--;
      socket.broadcast.emit('newclientconnect',{ description: clients + ' clients connected!'})
   });
});
http.listen(3000, function(){
   console.log('listening on localhost:3000');
});

以及處理此事件的 html：

<!DOCTYPE html>
<html>
   <head><title>Hello world</title></head>
   <script src="/socket.io/socket.io.js"></script>
   <script>
      var socket = io();
      socket.on('newclientconnect',function(data){
               document.body.innerHTML = '';
               document.write(data.description);
      });
   </script>
   <body>Hello world</body>
</html>

現在，最新的客戶端會收到歡迎訊息，而其他客戶端會收到當前連線到伺服器的客戶端數量。

Socket.IO - 名稱空間

Socket.IO 允許您為套接字“名稱空間”，這本質上意味著分配不同的端點或路徑。這是一個有用的功能，可以最大限度地減少資源（TCP 連線）的數量，同時透過引入通訊通道之間的分離來分離應用程式中的關注點。多個名稱空間實際上共享相同的 WebSockets 連線，從而節省了伺服器上的套接字埠。

名稱空間是在伺服器端建立的。但是，客戶端透過向伺服器傳送請求來加入它們。

預設名稱空間

根名稱空間 '/' 是預設名稱空間，如果客戶端在連線到伺服器時未指定名稱空間，則客戶端將加入該名稱空間。使用客戶端 socket 物件進行的所有伺服器連線都連線到預設名稱空間。例如：

var socket = io();

這將客戶端連線到預設名稱空間。此名稱空間連線上的所有事件都將由伺服器上的io 物件處理。所有之前的示例都使用預設名稱空間與伺服器進行通訊。

自定義名稱空間

我們可以建立自己的自定義名稱空間。要在伺服器端設定自定義名稱空間，我們可以呼叫 'of' 函式：

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
   res.sendFile('E:/test/index.html');});
   
var nsp = io.of('/my-namespace');
nsp.on('connection', function(socket){
   console.log('someone connected');
   nsp.emit('hi', 'Hello everyone!');
});
http.listen(3000, function(){
   console.log('listening on localhost:3000');
});

現在，要將客戶端連線到此名稱空間，您需要將名稱空間作為引數提供給客戶端的io 建構函式呼叫以建立連線和套接字物件。

例如，要連線到上述名稱空間，請使用以下 HTML：

<!DOCTYPE html>
<html>
   <head><title>Hello world</title></head>
   <script src="/socket.io/socket.io.js"></script>
   <script>
      var socket = io('/my-namespace');
      socket.on('hi',function(data){
         document.body.innerHTML = '';
         document.write(data);
      });
   </script>
   <body></body>
 </html>

每次有人連線到此名稱空間時，他們都會收到一個 'hi' 事件，顯示訊息“Hello everyone!”。

Socket.IO - 房間

在每個名稱空間內，您還可以定義套接字可以加入和離開的任意通道。這些通道稱為房間。房間用於進一步分離關注點。房間也像名稱空間一樣共享相同的套接字連線。使用房間時需要注意的一點是，它們只能在伺服器端加入。

加入房間

您可以呼叫套接字上的join方法將套接字訂閱到給定的通道/房間。例如，讓我們建立名為'room-<room-number>'的房間並加入一些客戶端。一旦此房間已滿，就建立另一個房間並將客戶端加入到那裡。

注意 - 我們目前在預設名稱空間（即 '/'）上執行此操作。您也可以以相同的方式在自定義名稱空間中實現此功能。

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
   res.sendfile('index.html');
});
var roomno = 1;
io.on('connection', function(socket){
   socket.join("room-"+roomno);
   //Send this event to everyone in the room.
   io.sockets.in("room-"+roomno).emit('connectToRoom', "You are in room no. "+roomno);
})
http.listen(3000, function(){
   console.log('listening on localhost:3000');
});

只需在客戶端處理此connectToRoom事件。

<!DOCTYPE html>
<html>
   <head><title>Hello world</title></head>
   <script src="/socket.io/socket.io.js"></script>
   <script>
      var socket = io();
      socket.on('connectToRoom',function(data){
         document.body.innerHTML = '';
         document.write(data);
      });
   </script>
   <body></body>
</html>

現在，如果您連線三個客戶端，則前兩個客戶端將收到以下訊息：

You are in room no. 1

離開房間

要離開房間，您需要呼叫 leave 函式，就像您在套接字上呼叫 join 函式一樣。

例如 - 要離開房間 'room-1'，

socket.leave("room-"+roomno);

Socket.IO - 錯誤處理

到目前為止，我們一直在本地伺服器上工作，這幾乎不會給我們帶來與連線、超時等相關的錯誤。但是，在現實生活中的生產環境中，處理此類錯誤至關重要。因此，我們現在將討論如何在客戶端處理連線錯誤。

客戶端 API 為我們提供了以下內建事件：

  • Connect - 客戶端成功連線時。

  • Connecting - 客戶端正在連線過程中時。

  • Disconnect - 客戶端斷開連線時。

  • Connect_failed - 與伺服器的連線失敗時。

  • Error - 從伺服器傳送錯誤事件時。

  • Message - 伺服器使用send函式傳送訊息時。

  • Reconnect - 成功重新連線到伺服器時。

  • Reconnecting - 客戶端正在重新連線過程中時。

  • Reconnect_failed - 重新連線嘗試失敗時。

為了處理錯誤，我們可以使用我們在客戶端建立的 out-socket 物件來處理這些事件。

例如 - 如果我們的連線失敗，我們可以使用以下程式碼再次連線到伺服器：

socket.on('connect_failed', function() {
   document.write("Sorry, there seems to be an issue with the connection!");
})

Socket.IO - 日誌記錄和除錯

Socket.IO 使用一個非常著名的除錯模組，該模組由 ExpresJS 的主要作者開發，稱為 debug。早期的 Socket.IO 習慣於將所有內容記錄到控制檯，這使得除錯問題相當困難。在 v1.0 版本釋出後，您可以指定要記錄的內容。

伺服器端

檢視可用資訊的最佳方法是使用 * -

DEBUG=* node app.js

這將為您的伺服器控制檯著色並輸出發生的所有事件。例如，我們可以考慮以下螢幕截圖。

Logging Example

客戶端

將此貼上到控制檯，單擊回車並重新整理頁面。這將再次將與 Socket.io 相關的所有內容輸出到您的控制檯。

localStorage.debug = '*';

您可以限制輸出以使用以下命令獲取來自套接字的傳入資料的除錯資訊。

localStorage.debug = 'socket.io-client:socket';

如果您使用第二個語句記錄資訊，則可以看到如下所示的結果：

Client Logging

有一篇關於 socket.io 除錯的非常好的部落格文章這裡。

Socket.IO - 內部機制

在本章中，我們將討論回退、使用 Socket.IO 進行連線、事件和訊息。

回退

Socket.IO 具有許多底層傳輸機制，這些機制處理由於跨瀏覽器問題、WebSocket 實現、防火牆、埠阻塞等而產生的各種約束。

儘管 W3C 為 WebSocket API 定義了一個規範，但它在實現方面仍然不足。Socket.IO 為我們提供了回退機制，可以處理此類問題。如果我們使用原生 API 開發應用程式，則必須自己實現回退。Socket.IO 按以下順序涵蓋大量回退：

  • WebSockets
  • FlashSocket
  • XHR 長輪詢
  • XHR 多部分流
  • XHR 輪詢
  • JSONP 輪詢
  • iframe

使用 Socket.IO 連線

Socket.IO 連線始於握手。這使得握手成為協議的一個特殊部分。除了握手之外，協議中的所有其他事件和訊息都透過套接字傳輸。

Socket.IO 旨在與 Web 應用程式一起使用，因此假定這些應用程式始終能夠使用 HTTP。正是由於這個原因，Socket.IO 握手透過 HTTP 使用握手 URI（傳遞給 connect 方法）上的 POST 請求進行。

事件和訊息

WebSocket 原生 API 只發送訊息。Socket.IO 在這些訊息之上提供了一個附加層，這允許我們建立事件，並再次幫助我們透過分離傳送的不同型別的訊息來輕鬆開發應用程式。

原生 API 只以純文字形式傳送訊息。Socket.IO 也解決了這個問題。它為我們處理資料的序列化和反序列化。

我們有一個官方的 Web 客戶端 API。對於其他客戶端，例如原生手機、其他應用程式客戶端，我們也可以使用以下步驟使用 Socket.IO。

  • 步驟 1 - 需要使用上面討論的相同連線協議建立連線。

  • 步驟 2 - 訊息需要與 Socket.IO 指定的格式相同。此格式使 Socket.IO 能夠確定訊息的型別和訊息中傳送的資料以及對操作有用的某些元資料。

訊息格式為：

[type] : [id ('+')] : [endpoint] (: [data]

上述命令中的引數解釋如下：

  • Type 是一個一位整數，指定它是哪種型別的訊息。

  • ID 是訊息 ID，一個用於確認的增量整數。

  • Endpoint 是訊息要傳遞到的套接字端點……

  • Data 是要傳遞到套接字的關聯資料。對於訊息，它被視為純文字；對於其他事件，它被視為 JSON。

在下一章中，我們將編寫一個 Socket.IO 聊天應用程式。

Socket.IO - 聊天應用示例

既然我們已經熟悉了 Socket.IO，讓我們編寫一個聊天應用程式，我們可以使用它在不同的聊天室中聊天。我們將允許使用者選擇使用者名稱並允許他們使用使用者名稱聊天。所以首先，讓我們設定我們的 HTML 檔案來請求使用者名稱：

<!DOCTYPE html>
<html>
   <head><title>Hello world</title></head>
   <script src="/socket.io/socket.io.js"></script>
   <script>
      var socket = io();
   </script>
   <body>
      <input type="text" name="name" value="" placeholder="Enter your name!">
      <button type="button" name="button">Let me chat!</button>
   </body>
</html>

現在我們已經設定了 HTML 來請求使用者名稱，讓我們建立伺服器來接受來自客戶端的連線。我們將允許使用者使用setUsername事件傳送他們選擇的使用者名稱。如果使用者存在，我們將透過userExists事件進行響應，否則使用userSet事件。

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
   res.sendFile('E:/test/index.html');});
users = [];
io.on('connection', function(socket){
   console.log('A user connected');
   socket.on('setUsername', function(data){
      if(users.indexOf(data) > -1){
         users.push(data);
         socket.emit('userSet', {username: data});
      } else {
         socket.emit('userExists', data + ' username is taken! Try some other username.');
     }
   })
});
http.listen(3000, function(){
   console.log('listening on localhost:3000');
});

當人們單擊按鈕時，我們需要將使用者名稱傳送到伺服器。如果使用者存在，我們將顯示錯誤訊息；否則，我們將顯示訊息螢幕：

<!DOCTYPE html>
<html>
   <head><title>Hello world</title></head>
   <script src="/socket.io/socket.io.js"></script>
   <script>
      var socket = io();
      function setUsername(){
         socket.emit('setUsername', document.getElementById('name').value);
      };
      var user;
      socket.on('userExists', function(data){
         document.getElementById('error-container').innerHTML = data;
      });
      socket.on('userSet', function(data){
         user = data.username;
         document.body.innerHTML = '<input type="text" id="message">\
         <button type="button" name="button" onclick="sendMessage()">Send</button>\
         <div id="message-container"></div>';
      });
      function sendMessage(){
         var msg = document.getElementById('message').value;
         if(msg){
            socket.emit('msg', {message: msg, user: user});
         }
      }
      socket.on('newmsg', function(data){
         if(user){
            document.getElementById('message-container').innerHTML +='<div><b>' + data.user + '</b>: ' + data.message + '</div>'
         }
      })
   </script>
   <body>
      <div id="error-container"></div>
      <input id="name" type="text" name="name" value="" placeholder="Enter your name!">
      <button type="button" name="button" onclick="setUsername()">Let me chat!</button>
      </body>
   </html>

現在，如果您使用相同的使用者名稱連線兩個客戶端，它將給出如下所示的錯誤訊息：

Chat Name Taken

一旦您提供了可接受的使用者名稱，您將進入一個帶有訊息框和傳送訊息按鈕的螢幕。現在，我們必須處理並將訊息定向到連線的客戶端。為此，請修改您的 app.js 檔案以包含以下更改：

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
   res.sendFile('E:/test/index.html');});
users = [];
io.on('connection', function(socket){
   console.log('A user connected');
   socket.on('setUsername', function(data){
      console.log(data);
      if(users.indexOf(data) > -1){
         socket.emit('userExists', data + ' username is taken! Try some other username.');
      } else {
         users.push(data);
         socket.emit('userSet', {username: data});
      }
   });
   socket.on('msg', function(data){
      //Send message to everyone
      io.sockets.emit('newmsg', data);
   })
});
http.listen(3000, function(){
   console.log('listening on localhost:3000');
});

現在將任意數量的客戶端連線到您的伺服器，為他們提供使用者名稱並開始聊天！在以下示例中，我們連線了名為 Ayush 和 Harshit 的兩個客戶端，並從這兩個客戶端傳送了一些訊息：

Chat Example
列印頁面
上一頁
下一頁
廣告