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!