Vue.js 如何使用 Socket.IO ? 原 荐
source link: https://www.tuicool.com/articles/QjyUzqj
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Vue.js 如何使用 Socket.IO ?
顶
原
荐
字数 849
阅读 10
收藏 0
在很多需求业务中,都需要浏览器和服务器实时通信来实现功能,比如:扫码登录(扫码后,手机确认登录,PC网页完成登录并跳转)、订单语言提醒等,这些都是建立在两端实时通信的基础上的。对前端而言,来实现浏览器和服务器实时通信,最好的选择就是Socket.IO库,能够快速的实现两端实时通信功能。
1、什么是 Socket.IO?
Socket.IO
是一个WebSocket库,可以在浏览器和服务器之间实现实时,双向和基于事件的通信。它包括:Node.js服务器库、浏览器的Javascript客户端库。它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用,非常方便和人性化,而且支持的浏览器最低达IE5.5
2、Socket.IO 主要特点
(1)、支持浏览器/Nodejs环境 (2)、支持双向通信 (3)、API简单易用 (4)、支持二进制传输 (5)、减少传输数据量
3、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)服务端
服务端,我们基于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有哪些事件
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' ); };
5、Socket.IO全家桶
© 著作权归作者所有
上一篇: Spring监听器与proxool.xml(数据库连接池)
下一篇: CSS3动画解析抖音 LOGO制作
相关文章 最新文章
一、Node中socket.io基础 1、是什么Socket.IO类库,是在服务器和浏览器之间提供一个共享接口,其可以用于实现以下几种通信方式: HTML5中的WebSocket通信 Flash中使用的WebSocket通信 XHR轮询...
前端攻城老湿
2018/11/19
0
0
一、Node中socket.io基础 1、是什么 Socket.IO类库,是在服务器和浏览器之间提供一个共享接口,其可以用于实现以下几种通信方式: HTML5中的WebSocket通信 Flash中使用的WebSocket通信 XHR轮...
fenerchen
2018/07/24
0
0
一、写在前面 如何实现文章的实时保存?一般写文章的写博客的网站都会有这个功能点,这样保证了用户在不小心退出的情况下数据的保存下来,这样的交互比较符合用户的使用心理学。对于用户来说...
saucxs
05/19
0
0
websocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。大多数 Web 应用程序将通过频繁的异步JavaScript和XML(AJAX)请求实现长轮询。轮询的效率低,非常浪费资源。而webso...
xanggang
2018/08/13
0
0
[email protected] 是一个全新的 Vue 项目脚手架。不同于 1.x/2.x 基于模板的脚手架,[email protected] 采用了一套基于插件的架构,它将部分核心功能收敛至 CLI 内部,同时对开发者暴露可拓展的 API 以供...
滴滴WebApp架构组
2018/09/05
0
0
没有更多内容
加载失败,请刷新页面
加载更多本文由葡萄城技术团队于原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 一直以来C#都是微软在编程语言方面最为显著的Tag,但时至...
葡萄城技术团队
53分钟前
10
0
Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @for_ :#今日歌曲推荐# 鲁叔啥时能来深圳。分享Ludovico Einaudi的单曲《Drop》: (来自@网易云音乐) 《Drop》- Ludovico Einaudi 手机党少年...
小小编辑
今天
2.4K
29
前情回顾 第二天100天搞定机器学习|Day2简单线性回归分析,我们学习了简单线性回归分析,这个模型非常简单,很容易理解。实现方式是sklearn中的LinearRegression,我们也学习了LinearRegress...
机器学习与统计学
今天
3
0
一:源码分析代码片段 public static void main(String[] args) { try { // 基本mybatis环境 // 1.定义mybatis_config文件地址 String resources = "myb......
须臾之余
今天
17
0
今天闲暇之余写了一个爬虫例子。通过爬虫去爬取京东的用户评价,通过分析爬取的数据能得到很多结果,比如,哪一种颜色的胸罩最受女性欢迎,以及中国女性的平均size(仅供参考哦~) 打开开发者工...
Object_Man
今天
18
0
没有更多内容
加载失败,请刷新页面
加载更多Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK