Socket.IO - 事件处理

Socket.IO - 事件处理 首页 / Socket.io入门教程 / Socket.IO - 事件处理

Socket基于事件工作,有一些保留的事件,可以使用服务器端的Socket对象进行访问。

这些是-

  • Connect
  • Message
  • Disconnect
  • Reconnect
  • Ping
  • Join and
  • Leave

客户端Socket对象还为我们提供了一些保留事件,它们是-

  • Connect
  • Connect_error
  • Connect_timeout
  • Reconnect

在Hello Learnfk示例中,我们使用连接和断开连接事件记录用户连接和离开的时间,现在,我们将使用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)的事件,Socket对象上的send函数与'message'事件关联。

现在,我们需要在客户端处理此事件。因此,编辑您的index.html脚本标签以包括以下代码-

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

我们现在正在处理客户端上的"消息"事件。现在访问浏览器中的页面时,将显示以下屏幕截图。

无涯教程网

Events Before

经过4秒后,服务器发送了message事件,我们的客户端将对其进行处理并产生以下输出-

Events After

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() {
      //发出事件时发送对象
      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 Learnfk</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 Learnfk</body>
</html>

这将与前面的示例相同,在这种情况下,事件为testerEvent,当您打开浏览器并转到localhost:3000时,您将受到欢迎-

Hello Learnfk

四秒钟后,将触发此事件,浏览器将文本更改为-

链接:https://www.learnfk.comhttps://www.learnfk.com/socket.io/socket.io-event-handling.html

来源:LearnFk无涯教程网

A custom event named testerEvent!

我们还可以从客户端发出事件,要从客户端发出事件,请在Socket 对象上使用发出函数。

<!DOCTYPE html>
<html>
   <head>
      <title>Hello Learnfk</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 Learnfk</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!

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

算法面试通关40讲 -〔覃超〕

重学前端 -〔程劭非(winter)〕

人人都能学会的编程入门课 -〔胡光〕

Linux内核技术实战课 -〔邵亚方〕

实用密码学 -〔范学雷〕

大数据经典论文解读 -〔徐文浩〕

超级访谈:对话张雪峰 -〔张雪峰〕

计算机基础实战课 -〔彭东〕

运维监控系统实战笔记 -〔秦晓辉〕

好记忆不如烂笔头。留下您的足迹吧 :)