上一节:
下一节:

  Socket.IO 事件处理

  • 事件

    Socket基于事件工作。有一些保留的事件，可以使用服务器端的socket对象进行访问。这些是
    • Connect
    • Message
    • Disconnect
    • Reconnect
    • Ping
    • Join and
    • Leave
    客户端socket对象还为我们提供了一些保留事件，它们是-
    • 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('用户已连接');

   //Send a message after a timeout of 4seconds
   setTimeout(function() {
      socket.send('连接4秒后发来的消息!');
   }, 4000);

   socket.on('disconnect', function () {
      console.log('用户断开连接');
   });
});

http.listen(3000, function() {
   console.log('listening on *:3000');
});
    客户端连接后四秒钟，这将向我们的客户端发送一个名为message(内置)的事件。socket对象上的send函数关联“message”事件。现在，我们需要在客户端处理此事件。因此，编辑您的index.html脚本标记以包括以下代码- 
    
<script>
   var socket = io();
   socket.on('message', function(data){document.write(data)});
</script>
    我们现在正在处理客户端上的“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('index.html');
});

io.on('connection', function(socket) {
   console.log('A user connected');

   //发送一个消息的时候
   setTimeout(function() {
      //当emmiting一个事件发送一个对象
      socket.emit('testerEvent', { description: '一个自定义事件 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时，您会受到欢迎-
    经过4秒后，服务器发送了testerEvent事件，我们的客户端将对其进行处理并产生以下输出-
    我们还可以从客户端发出事件。要从客户端发出事件，请在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('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!
上一节:
下一节: