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 相关文章推荐
javascript CSS画图之基础篇
Jul 29 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 Javascript
微信小程序实现弹出菜单动画
Jun 21 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 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
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
php时间戳转换的示例
2014/03/31 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
初学JavaScript第二章
2008/09/30 Javascript
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
Python的requests网络编程包使用教程
2016/07/11 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
详解python的argpare和click模块小结
2019/03/31 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
Linux的主要特性
2014/10/06 面试题
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL
js 实现验证码输入框示例详解
2022/09/23 Javascript