事件处理（ Event Handling）

优质

小牛编辑

131浏览

2023-12-01

套接字基于事件工作。有一些保留事件，可以使用服务器端的套接字对象访问。

这些是 -

Connect
Message
Disconnect
Reconnect
Ping
Join and
Leave

客户端套接字对象还为我们提供了一些保留事件，它们是 -

Connect
Connect_error
Connect_timeout
Reconnect, etc

在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)的事件。套接字对象上的send函数关联'message'事件。

现在，我们需要在客户端处理此事件。因此，编辑index.html脚本标记以包含以下代码 -

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

我们现在正在处理客户端上的“消息”事件。当您现在在浏览器中转到该页面时，您将看到以下屏幕截图。

传递4秒后，服务器发送消息事件，我们的客户端将处理它并产生以下输出 -

Note - 我们在这里发送了一串文字; 我们也可以在任何情况下发送一个对象。

Message是由API提供的内置事件，但在实际应用程序中没有太大用处，因为我们需要能够区分事件。

为此，Socket.IO为我们提供了创建custom events的能力。您可以使用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!

我们还可以从客户端发出事件。要从客户端发出事件，请使用套接字对象上的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>

要处理这些事件，请使用服务器上套接字对象的on function 。

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!