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 使用技巧精萃(.net html
Apr 25 Javascript
Javascript 文件夹选择框的两种解决方案
Jul 01 Javascript
ParseInt函数参数设置介绍
Jan 02 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
vue项目出现页面空白的解决方案
Oct 31 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 Javascript
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
7个你应该知道的JS原生错误类型
Apr 29 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+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
关于PHP自动判断字符集并转码的详解
2013/06/26 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
解密效果
2006/06/23 Javascript
用js遍历 table的脚本
2008/07/23 Javascript
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
JQuery开发的数独游戏代码
2010/10/29 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
初步使用bootstrap快速创建页面
2016/03/03 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
python测试驱动开发实例
2014/10/08 Python
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
Django工程的分层结构详解
2019/07/18 Python
Python目录和文件处理总结详解
2019/09/02 Python
Python全栈之列表数据类型详解
2019/10/01 Python
python实现猜数字游戏
2020/03/25 Python
基于Python快速处理PDF表格数据
2020/06/03 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
中科创达面试题
2016/12/28 面试题
临床医学大学生求职信
2013/09/28 职场文书
材料物理专业个人求职信
2013/12/15 职场文书
红色旅游心得体会
2014/09/03 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
百年校庆感言
2015/08/01 职场文书
实操Python爬取觅知网素材图片示例
2021/11/27 Python