node中socket.io的事件使用详解


Posted in Javascript onDecember 15, 2014

socket.io类库不但可以相互发送消息,而且还可以通过socket端口对象的emit方法互相发送事件.

emit在之前的事件上说过现在一句话带过:emit是用来手动触发事件的.

socket.emit(event,data,function(data1,data2......){

});

在使用emit方法发送事件时,可以再另一端使用socket端口对象的on方法会once方法监听.

socket.on(event,function(data,fn){

});

socket.once(event,function(data,fn){

})

上面的回调函数中的参数data:对方发送的事件中携带的数据,

fn:对方在发送事件时指定的callback回调函数.

案例1:当服务器和客户端连接后,向客户端发送一个news事件,事件中携带一个对象,该对象的hello属性值为"你好".在接收到客户端发送my other event事件时,在控制台中输出"服务器端就收到数据"+客户端发送事件中携带的数据.

服务器端代码,server.js

 var http=require("http");

 var sio=require("socket.io");

 var fs=require("fs");

 var server=http.createServer(function (req,res) {

     res.writeHead(200,{"Content-type":"text/html"});

     res.end(fs.readFileSync("./index.html"));

 });

 server.listen(1337);

 var socket=sio.listen(server);

 socket.on("connection", function (socket) {

     socket.emit("news",{hello:"你好"});

     socket.on("my other event", function (data) {

         console.log("服务器端接受到信息%j",data);

     });

 });

客户端index.html代码:

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script src="/socket.io/socket.io.js"></script>

     <script>

         var socket=io.connect();

         socket.on("news", function (data) {

             console.log(data.hello);

             socket.emit("my other event",{my:"data"});

         });        

     </script>

 </head>

 <body>

 

 </body>

运行结果:、
 

node中socket.io的事件使用详解
可以发现一点:执行总是在监听端,而不是手动执行端.

案例2:在手动触发对方事件时,指定回调函数.

当客户端和服务端连接后,向客户端发送setName事件,事件携带"张三",触发事件时,指定一个回调函数,该回调函数向控制台输出2个参数值.

 var http=require("http");

 var sio=require("socket.io");

 var fs=require("fs");

 var server=http.createServer(function (req,res) {

     res.writeHead(200,{"Content-type":"text/html"});

     res.end(fs.readFileSync("./index.html"));

 });

 server.listen(1337);

 var socket=sio.listen(server);

 socket.on("connection", function (socket) {

     socket.emit("setName","张三", function (data1,data2) {

         console.log(data1);

         console.log(data2);

     });

 });
 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script src="/socket.io/socket.io.js"></script>

     <script>

         var socket=io.connect();

         socket.on("setName", function (name,fn) {

            console.log(name);

             fn("李四","王五");

         });      

     </script>

 </head>

 <body>

 

 </body>

 </html>

执行结果:

node中socket.io的事件使用详解

回调函数实在触发端执行的.

Javascript 相关文章推荐
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
js/html光标定位的实现代码
Sep 23 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
javascript实现异形滚动轮播
Nov 28 Javascript
全网小程序接口请求封装实例代码
Nov 06 Javascript
vue实现购物车的小练习
Dec 21 Vue.js
node.js中使用socket.io的方法
Dec 15 #Javascript
Lua表达式和控制结构学习笔记
Dec 15 #Javascript
如何在node的express中使用socket.io
Dec 15 #Javascript
node.js中使用socket.io制作命名空间
Dec 15 #Javascript
node.js中的fs.fstatSync方法使用说明
Dec 15 #Javascript
node.js中的fs.fstat方法使用说明
Dec 15 #Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 #Javascript
You might like
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
js函数返回多个返回值的示例代码
2013/11/05 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
vue实现信息管理系统
2020/05/30 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
python 从远程服务器下载东西的代码
2013/02/10 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
python和c语言的主要区别总结
2019/07/07 Python
Django的models模型的具体使用
2019/07/15 Python
应届生的求职推荐信范文
2013/11/30 职场文书
中医临床专业自我鉴定范文
2014/01/15 职场文书
党员岗位承诺书
2014/03/25 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
理想国读书笔记
2015/06/25 职场文书
销售会议开幕词
2016/03/04 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python