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 相关文章推荐
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
JavaScript 语言的递归编程
May 18 Javascript
jquery focus(fn),blur(fn)方法实例代码
Dec 16 Javascript
js简单实现删除记录时的提示效果
Dec 05 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
详解Puppeteer 入门教程
May 09 Javascript
微信小程序使用npm包的方法步骤
Aug 13 Javascript
微信小程序sessionid不一致问题解决
Aug 30 Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 Javascript
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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
python读取文本中数据并转化为DataFrame的实例
2018/04/10 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
迷你西餐厅创业计划书范文
2013/12/31 职场文书
五年级数学教学反思
2014/02/11 职场文书
《乞巧》教学反思
2014/02/27 职场文书
新农村建设汇报材料
2014/08/15 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android