开发学院

您的位置:首页>教程>正文

教程正文

Socket.IO 事件处理

Socket.IO事件处理

  Socket.IO是基于事件的。可以使用服务器端的Socket对象访问一些保留事件:connect, message, disconnect, reconnect, ping, join and leave。客户端Socket对象还为我们提供了一些保留事件: connect, connect_error, connect_timeout, reconnect等。

  在hello world示例中,我们使用连接并在用户连接离开时记录断开事件。现在,我们将使用消息事件将消息从服务器传递给客户端。为此,请修改io.on('connection', 

  这将在客户端连接后4秒将一个称为message的事件发送到我们的客户端。Socket对象上的send函数将与消息事件关联。

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');
});

  现在我们需要在我们的客户端处理此事件。因此,编辑您的index.html脚本,代码如下:

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

  现在我们处理客户端上的message事件。当您现在在浏览器中访问页面时,将显示如下内容:

events_before.jpg

  4秒钟后,服务器发送消息事件,我们的客户端将处理它并生成以下输出:

events_after.jpg

  在本例中我们只发送了一个字符串,实际上我们也可以在任何事件中发送任何类型对象。

  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>

   当您打开浏览器并转至localhost:3000时,您将看到如下内容:

Hello world

   4秒后你会发现浏览器的内容变成:

A custom event named 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!