Socket.IO - 事件處理

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

這些事件包括：

連線 (Connect)
訊息 (Message)
斷開連線 (Disconnect)
重新連線 (Reconnect)
Ping
加入 (Join) 和
離開 (Leave)。

客戶端的socket物件也提供了一些保留事件，包括：

連線 (Connect)
連線錯誤 (Connect_error)
連線超時 (Connect_timeout)
重新連線等等 (Reconnect, etc.)

現在，讓我們來看一個使用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'事件。當您現在在瀏覽器中訪問該頁面時，您將看到以下截圖。

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

注意 - 我們這裡傳送的是文字字串；我們也可以在任何事件中傳送物件。

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!

列印頁面