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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
JSON扫盲帖 JSON.as类教程
Feb 16 Javascript
Jquery中增加参数与Json转换代码
Nov 20 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
JQuery性能优化的几点建议
May 14 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
个人小程序接入支付解决方案
May 23 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 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 addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
Python入门篇之对象类型
2014/10/17 Python
Python多线程爬虫简单示例
2016/03/04 Python
Python魔法方法详解
2019/02/13 Python
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
测试工程师职业规划书
2014/02/06 职场文书
货车司机岗位职责
2014/03/18 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
热门专业求职信
2014/05/24 职场文书
个人工作表现评价材料
2014/09/21 职场文书
商铺门面租房协议书
2014/10/21 职场文书
初三毕业评语
2014/12/26 职场文书
检讨书大全
2015/01/27 职场文书
2015员工年度考核评语
2015/03/25 职场文书