Socket.IO - Hello World

Created: November-04, 2018

建立一個名為 app.js 的檔案並輸入以下程式碼來設定快速應用程式 -

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

app.get('/', function(req, res) {
   res.sendfile('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 進行檢查。

這將設定我們的快速應用程式，現在在根路由上提供HTML檔案。現在，每當有人導航/關閉此頁面時，每當使用者訪問此頁面並且“使用者斷開連線”時，我們將需要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('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物件。

我們已經設定了伺服器來記錄連線和斷開連線的訊息。我們現在必須包含客戶端指令碼並在那裡初始化 Sockets 物件，以便客戶端可以在需要時建立連線。該指令碼由我們的 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

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

A user connected
A user disconnected
A user connected

我們現在有 Sockets 連線工作。這能看出在 Socket.IO 中設定連線是多麼的容易。