Socket.IO - 事件處理

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

這些是 -

  • 連線
  • 資訊
  • 斷開
  • 重新連線
  • Ping
  • 加入
  • 離開

客戶端Sockets 物件還為我們提供了一些保留事件,它們是 -

  • Connect
  • Connect_error
  • Connect_timeout
  • Reconnect

Hello World 示例中,我們使用連線和斷開連線事件來記錄使用者連線和離開時的情況。現在我們將使用 message 事件將訊息從伺服器傳遞到客戶端。為此,請修改 io.on ('connection', function(socket)) 呼叫以包含以下內容 -

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');
});

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(built in) 的事件 。Sockets 物件上的 send 函式關聯 message 事件。

現在,我們需要在客戶端處理此事件。因此,編輯 index.html 指令碼標記以包含以下程式碼 -

<script>
   var socket = io();
   socket.on('message', function(data){document.write(data)});
</script>

我們現在正在處理客戶端上的“訊息”事件。當您現在在瀏覽器中轉到該頁面時,您將看到以下螢幕截圖。

Events Before

傳遞4秒後,伺服器傳送訊息事件,我們的客戶端將處理它併產生以下輸出 -

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('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!

我們還可以從客戶端發出事件。要從客戶端發出事件,請使用Sockets 物件上的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>

要處理這些事件,請使用 伺服器上Sockets 物件的 on函式

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');
});

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!