Vue.js 如何使用Socket.IO ?

浏览:
字体:
发布时间:2019-08-01 09:03:59
来源:

在很多需求业务中,都需要浏览器和服务器实时通信来实现功能,比如:扫码登录(扫码后,手机确认登录,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)客户端


 
  1. npm install vue-socket.io --save 

main.js添加下列代码


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

发送消息和监听消息


 
  1. //发送信息给服务端  
  2. this.$socket.emit('login',{  
  3. username: 'username',  
  4. password: 'password'  
  5. });  
  6. //接收服务端的信息  
  7. this.sockets.subscribe('relogin', (data) => {  
  8. console.log(data)  
  9. })  

(2)服务端

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


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

index.js文件


 
  1. var app = require('express')();  
  2. var http = require('http').Server(app);  
  3. var io = require('socket.io')(http);  
  4. app.get('/', function(req, res){  
  5. res.send('  
  6. 你好web秀 
  7. '); 
  8. });  
  9. io.on('connection',function(socket) {  
  10. //接收数据  
  11. socket.on('login', function (obj) {  
  12. console.log(obj.username);  
  13. // 发送数据  
  14. socket.emit('relogin', {  
  15. msg: `你好${obj.username}`,  
  16. code: 200  
  17. });  
  18. });  
  19. });  
  20. http.listen(3000, function(){  
  21. console.log('listening on *:3000');  
  22. });  

然后启动服务端服务


 
  1. node index.js 

客户端即可查看效果。

4、Socket.IO有哪些事件

 


 
  1. io.on('connect', onConnect);  
  2. function onConnect(socket){  
  3. // 发送给当前客户端  
  4. socket.emit(  
  5. 'hello',  
  6. 'can you hear me?',  
  7. 1,  
  8. 2,  
  9. 'abc'  
  10. );  
  11. // 发送给所有客户端,除了发送者  
  12. socket.broadcast.emit(  
  13. 'broadcast',  
  14. 'hello friends!'  
  15. );  
  16. // 发送给同在 'game' 房间的所有客户端,除了发送者  
  17. socket.to('game').emit(  
  18. 'nice game',  
  19. "let's play a game"  
  20. );  
  21. // 发送给同在 'game1' 或 'game2' 房间的所有客户端,除了发送者  
  22. socket.to('game1').to('game2').emit(  
  23. 'nice game',  
  24. "let's play a game (too)"  
  25. );  
  26. // 发送给同在 'game' 房间的所有客户端,包括发送者  
  27. io.in('game').emit(  
  28. 'big-announcement',  
  29. 'the game will start soon'  
  30. );  
  31. // 发送给同在 'myNamespace' 命名空间下的所有客户端,包括发送者  
  32. io.of('myNamespace').emit(  
  33. 'bigger-announcement',  
  34. 'the tournament will start soon'  
  35. );  
  36. // 发送给指定 socketid 的客户端(私密消息)  
  37. socket.to().emit(  
  38. 'hey',  
  39. 'I just met you'  
  40. );  
  41. // 包含回执的消息  
  42. socket.emit(  
  43. 'question',  
  44. 'do you think so?', 
  45.  function (answer) {}  
  46. );  
  47. // 不压缩,直接发送  
  48. socket.compress(false).emit(  
  49. 'uncompressed',  
  50. "that's rough"  
  51. );  
  52. // 如果客户端还不能接收消息,那么消息可能丢失  
  53. socket.volatile.emit(  
  54. 'maybe',  
  55. 'do you really need it?'  
  56. );  
  57. // 发送给当前 node 实例下的所有客户端(在使用多个 node 实例的情况下)  
  58. io.local.emit(  
  59. 'hi',  
  60. 'my lovely babies'  
  61. );  
  62. };  

5、Socket.IO全家桶

>更多相关文章
24小时热门资讯
24小时回复排行
资讯 | QQ | 安全 | 编程 | 数据库 | 系统 | 网络 | 考试 | 站长 | 关于东联 | 安全雇佣 | 搞笑视频大全 | 微信学院 | 视频课程 |
关于我们 | 联系我们 | 广告服务 | 免责申明 | 作品发布 | 网站地图 | 官方微博 | 技术培训
Copyright © 2007 - 2020 Vm888.Com. All Rights Reserved
粤公网安备 44060402001498号 粤ICP备19097316号 请遵循相关法律法规
');})();