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) 建立一個新的 socket.io 例項，並將其附加到 http 伺服器。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

列印頁面