Socket.IO - 事件處理

Created: November-04, 2018

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!