📅  最后修改于: 2020-11-02 04:53:05             🧑  作者: Mango
套接字基于事件工作。有一些保留的事件,可以使用服务器端的套接字对象进行访问。
这些是-
客户端套接字对象还为我们提供了一些保留事件,它们是-
在Hello World示例中,我们使用连接和断开连接事件记录用户连接和离开的时间。现在,我们将使用message事件将消息从服务器传递到客户端。为此,请修改io.on (’connection’, 函数(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(内置)的事件。套接字对象上的send函数与’message’事件关联。
现在,我们需要在客户端处理此事件。因此,编辑您的index.html脚本标记以包括以下代码-
现在,我们正在处理客户端上的“消息”事件。现在访问浏览器中的页面时,将显示以下屏幕截图。
经过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。以下代码在客户端上处理此事件-
Hello world
Hello world
这将与前面的示例相同,在这种情况下,事件为testerEvent。当您打开浏览器并转到localhost:3000时,您会受到欢迎-
Hello world
四秒钟后,此事件将被触发,浏览器将文本更改为-
A custom event named testerEvent!
我们还可以从客户端发出事件。要从客户端发出事件,请在套接字对象上使用发出函数。
Hello world
Hello world
要处理这些事件,请使用服务器上套接字对象上的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!