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的document对象和window对象详解
Dec 30 Javascript
JS链式调用的实现方法
Mar 07 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
layer弹出层框架alert与msg详解
Mar 14 Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
Webpack之tree-starking 解析
Sep 11 Javascript
Vue瀑布流插件的使用示例
Sep 19 Javascript
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
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
destoon后台网站设置变成空白的解决方法
2014/06/21 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
JQuery显示、隐藏div的几种方法简明总结
2015/04/16 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
js解决movebox移动问题
2016/03/29 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
详解Vue源码中一些util函数
2019/04/24 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
python入门教程 python入门神图一张
2018/03/05 Python
Python面向对象之Web静态服务器
2019/09/03 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
2014年计生标语
2014/06/23 职场文书
行政求职信
2014/07/04 职场文书
银行实习推荐信
2015/03/27 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
用Python创建简易网站图文教程
2021/06/11 Python
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android