Vue.js 如何使用Socket.IO ？

在很多需求业务中，都需要浏览器和服务器实时通信来实现功能，比如：扫码登录(扫码后，手机确认登录，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全家桶