Vue.js如何使用Socket.IO的示例代码


Posted in Javascript onSeptember 05, 2019

在很多需求业务中,都需要浏览器和服务器实时通信来实现功能,比如:扫码登录(扫码后,手机确认登录,PC网页完成登录并跳转)、订单语言提醒等,这些都是建立在两端实时通信的基础上的。对前端而言,来实现浏览器和服务器实时通信,最好的选择就是Socket.IO库,能够快速的实现两端实时通信功能。

Vue.js如何使用Socket.IO的示例代码

1、什么是 Socket.IO?

Socket.IO 是一个WebSocket库,可以在浏览器和服务器之间实现实时,双向和基于事件的通信。它包括:Node.js服务器库、浏览器的Javascript客户端库。它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用,非常方便和人性化,而且支持的浏览器最低达IE5.5

2、Socket.IO 主要特点

Vue.js如何使用Socket.IO的示例代码

(1)、支持浏览器/Nodejs环境 (2)、支持双向通信 (3)、API简单易用 (4)、支持二进制传输 (5)、减少传输数据量

3、Vue.js 中 Socket.IO的使用

Vue.js如何使用Socket.IO的示例代码

(1)客户端

npm install vue-socket.io --save

main.js添加下列代码

import VueSocketIO from 'vue-socket.io'
 
Vue.use(new VueSocketIO({
 debug: true,
 // 服务器端地址
 connection: 'http://localhost:3000',
 vuex: {
 }
}))

发送消息和监听消息

//发送信息给服务端
this.$socket.emit('login',{
 username: 'username',
 password: 'password'
});

//接收服务端的信息
this.sockets.subscribe('relogin', (data) => {
 console.log(data)
})

(2)服务端

Vue.js如何使用Socket.IO的示例代码

服务端,我们基于express搭建node服务器。

npm install --save express
npm install --save socket.io

index.js文件

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
 res.send('<h1>你好web秀</h1>');
});
 
io.on('connection',function(socket) {
 //接收数据
 socket.on('login', function (obj) {    
  console.log(obj.username);
  // 发送数据
  socket.emit('relogin', {
  msg: `你好${obj.username}`,
  code: 200
  }); 
 });
});
 
http.listen(3000, function(){
 console.log('listening on *:3000');
});

然后启动服务端服务

node index.js

客户端即可查看效果。

4、Socket.IO有哪些事件

Vue.js如何使用Socket.IO的示例代码

io.on('connect', onConnect);

function onConnect(socket){

 // 发送给当前客户端
 socket.emit(
 'hello', 
 'can you hear me?', 
 1, 
 2, 
 'abc'
 );

 // 发送给所有客户端,除了发送者
 socket.broadcast.emit(
 'broadcast', 
 'hello friends!'
 );

 // 发送给同在 'game' 房间的所有客户端,除了发送者
 socket.to('game').emit(
 'nice game', 
 "let's play a game"
 );

 // 发送给同在 'game1' 或 'game2' 房间的所有客户端,除了发送者
 socket.to('game1').to('game2').emit(
 'nice game', 
 "let's play a game (too)"
 );

 // 发送给同在 'game' 房间的所有客户端,包括发送者
 io.in('game').emit(
 'big-announcement', 
 'the game will start soon'
 );

 // 发送给同在 'myNamespace' 命名空间下的所有客户端,包括发送者
 io.of('myNamespace').emit(
 'bigger-announcement', 
 'the tournament will start soon'
 );

 // 发送给指定 socketid 的客户端(私密消息)
 socket.to(<socketid>).emit(
 'hey', 
 'I just met you'
 );

 // 包含回执的消息
 socket.emit(
 'question', 
 'do you think so?', 
 function (answer) {}
 );

 // 不压缩,直接发送
 socket.compress(false).emit(
 'uncompressed', 
 "that's rough"
 );

 // 如果客户端还不能接收消息,那么消息可能丢失
 socket.volatile.emit(
 'maybe', 
 'do you really need it?'
 );

 // 发送给当前 node 实例下的所有客户端(在使用多个 node 实例的情况下)
 io.local.emit(
 'hi', 
 'my lovely babies'
 );
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 常用方法经典总结
Jan 28 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
Jan 13 Javascript
javascript实现跳转菜单的具体方法
Jul 05 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
JS使用onerror捕获异常示例
Aug 03 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
vue实现几秒后跳转新页面代码
Sep 09 Javascript
JavaScript实现简易计算器小功能
Oct 22 Javascript
vue实现验证用户名是否可用
Jan 20 Vue.js
vue路由守卫及路由守卫无限循环问题详析
Sep 05 #Javascript
关于JS解构的5种有趣用法
Sep 05 #Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 #Javascript
JavaScript获取某一天所在的星期
Sep 05 #Javascript
layui table设置某一行的字体颜色方法
Sep 05 #Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 #Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 #Javascript
You might like
PHP新手上路(三)
2006/10/09 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
javascript 面向对象编程 function也是类
2009/09/17 Javascript
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
vue watch关于对象内的属性监听
2019/04/22 Javascript
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
python实现人脸识别代码
2017/11/08 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
将python图片转为二进制文本的实例
2019/01/24 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
ProBikeKit新西兰:自行车套件,跑步和铁人三项装备
2017/04/05 全球购物
放飞蜻蜓反思
2014/02/05 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
教师现实表现材料
2014/02/14 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
大学国际贸易专业自荐信
2014/06/05 职场文书
法人身份证明书
2014/10/08 职场文书
2014年导购员工作总结
2014/11/18 职场文书
入党团支部推荐意见
2015/06/02 职场文书
详解python网络进程
2021/06/15 Python