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事件。当您现在在浏览器中访问页面时,将显示如下内容:
4秒钟后,服务器发送消息事件,我们的客户端将处理它并生成以下输出:
在本例中我们只发送了一个字符串,实际上我们也可以在任何事件中发送任何类型对象。
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!