Vue使用socket.io实现客户端服务器通信_vue 如何编辑为 socket 的客户端

Vue使用socket.io

socket.io中文文档 (适合快速上手)
英文官方文档（适合查阅详细）

介绍

socke.io 是 Websocket的一个库，支持及时、双向与基于事件的交流。它可以在每个平台、每个浏览器和每个设备上工作，可靠性和速度同样稳定。包括客户端的js和服务器端的node.js。

在Vue的客户端部署socket

1.安装插件

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

2.在main.js中导入依赖

import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'
Vue.use(new VueSocketIO({
  debug: true,
  connection: SocketIO('ws://127.0.0.1:3000'),  // 连接后端地址
}))
1
2
3
4
5
6

3.在Vue组件中使用

在组件中写入sockets，方法名代表事件，除开已有事件：error、connect、disconnect、disconnecting、newListener、removeListener、ping、pong，其他事件自定义名称作为方法名。

 export default {
        name: "chat",
        	methods:{
				sendinfo(){
					let text = '这是客户端给服务器通过提交clientinfo事件发送的信息'
					this.$socket.emit('clientinfo',text)
				}	
	},
            sockets: {
                connect: function () {  //这里是监听connect事件(非自定义事件)
                    this.id = this.$socket.id
            	},
            	serverinfo: function () {  //这里是监听serverinfo事件（自定义事件）
                    this.id = this.$socket.id
            	},
            	
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

服务器端

1. 安装插件

npm install --save express@4.15.2
1

2. 引入API

var app = require('express')();
var http = require('http').Server(app);
var io = require("socket.io")(http,{
// 使用cors设置跨域，因为是测试所以 origin 设置成 * ，可以设置成自己的域名，但是只能是单域名。methods是可允许的访问请求方式。
    cors: {
      origin: '*',
      methods: ["GET", "POST"]
    }
});

io.on('connection', function(socket){ // 监听连接，传入了socket
  console.log("连接");

  socket.on('disconnect',(re) => {   // 断开连接的监听要放在连接监听里面
    console.log('断开');
  });
io.emit('serverinfo', '这是服务器传给客户的信息，通过io.emit提交了一个serverinfo事件到客户端');	
socket.on('clientinfo',(re) => {  // 监听客户端发来的clientinfo事件
    console.log('服务器接收到了clientinfo事件');
  });
	
});

http.listen(3000, function(){ // 监听3000端口的客户端
  console.log('listening on port:3000');
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26