vue+express+socket.io实现前后端保持长连接
1.安装依赖包
#vue
npm install vue-socket.io --save
#node
npm install socket.io --save
2.在端项目中main.js引入依赖包
//socket设置
import VueSocketio from 'vue-socket.io';
Vue.use(new VueSocketio({
debug: true,
connection: 'http://127.0.0.1:8001' //地址+端口,由后端提供
}));
3.在vue模板文件中使用
3.1连接服务器时应该在mounted生命周期函数中
3.2可以在methods中写一些被动方法
<template>
<div>
<div>
<button @click="sendSocketMsg">发socket信息</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
text: "这是首页"
};
},
mounted() {
//添加socket事件监听
/**
* 当服务端和客户端连接成功时,服务端会监听到connection和connect事件,
* 客户端会监听到connect事件,断开连接时服务端对应到客户端的socket与
* 客户端均会监听到disconcect事件。
*/
this.sockets.listener.subscribe("connect", () => {
console.log("已连接到服务端");
});
this.sockets.listener.subscribe("disconcect", () => {
console.log("断开连接");
});
},
methods: {
sendSocketMsg() {
//向服务端发送消息
this.$socket.emit("webdata", { name: "张三" });
//接收服务端相对应的webdata数据
this.sockets.listener.subscribe("webdata", data => console.log(data));
}
}
};
</script>
4.在后端express中加载模块在./bin/www文件中加载
var socketConnect = require('../socket/index')
var io = require('socket.io').listen(server);
io.on('connection', function (socket) {
socketConnect(io,socket)
});
5.讲socket相关的设置抽取出来
// 此代码是上一段代码块中导入的../socket/index
module.exports = (io, socket) => {
console.log('服务端连接到长连接');
// 接收客户端与 webdata 发送的对应消息
socket.on('webdata', (data) => {
console.log(data) //{ name: '张三' }
socket.emit('webdata', { msg: 'broadcast' });
})
// io.emit()方法用于向服务端发送消息,参数1表示自定义的数据名,参数2表示需要配合事件传入的参数
// io.emit('webdata', { msg: 'client connect server success' });
// socket.broadcast.emit()表示向除了自己以外的客户端发送消息
//socket.broadcast.emit('server message', { msg: 'broadcast' });
// 监听断开连接状态:socket的disconnect事件表示客户端与服务端断开连接
socket.on('disconnect', function () {
console.log('服务端已断开长连接');
});
//销毁连接
//socket.disconnect();
}
6.测试
前端点击按钮控制台出现下图表示成功
后端控制台出现下图表示成功