前端代码
进去项目就连接 没有异步逻辑处理后连接(地址固定的 ,不用登陆) main.js
import VueSocketIO from 'vue-socket.io';
connetFun();
function connetFun(){
Vue.use(new VueSocketIO({
//研发环境会打印socket初始化过程+socket中定义的事件
debug: true,
//我们的鉴权是拼接在query的 这个根据自己项目的实际情况来
connection: `http://192.168.70.41:3009?${query}`,
options:{
path:{}, //不传的话会自动在路径加上/socket.io/
<!--{ path: "/my-app/" } -->//有路径写法
},
reconnect:true,//掉线后自动重连
options: {
autoConnect: true//自动连接
}
}));
}
new Vue({
el: '#app',
router,
store,
template: '<App />',
components: { App },
});
地址不固定/登录后/有参数需要异步获取 后再连接的 main.js
socket事件拿不到,调用事件报错
方法一: vue实例创建 在VueSocketIO创建实例之后,如果有问题 ,页面就加载不出来了connetFun();
function connetFun(){
Vue.use(new VueSocketIO({
debug: true,
connection: `http://192.168.70.41:3009?${query}`,//本地
options:{
path:{}
},
reconnect:true,
options: {
autoConnect: true
}
}));
new Vue({
el: '#app',
router,
store,
template: '<App />',
components: { App },
beforeCreate () {
Vue.prototype.bus = this
}
});
}
方法二:结合connect事件+store+路由守卫实现拦截
代码还木有
xxx.vue 监听事件 发送指令 监听事件 收指令
sockets: {
connect: function() {
this.$socket.emit('join');
this.setConnectSocket(true)
console.log('connect')
},
disconnect: function () {
this.setConnectSocket(false);
console.log('disconnect')
},
reconnect:function(){
console.log('用户重新连接')
},
error: function () {
},
demand: function () {
},
push: function () {
},
message:function (data) {//监听消息变化
console.log('message')
this.setMessageInfo(data)
},
join:function (data) {
this.$message({
message: '有新用户登录!',
type: 'success'
});
},
leave:function (data) {
this.$message({
message: '有用户离开!',
type: 'error'
});
},
},
发送指令
this.$socket.emit('message','哈哈哈哈');
服务端 express
//引入程序包
var express = require('express')
, path = require('path')
, app = express()
, server = require('http').createServer(app)
, io = require('socket.io').listen(server);
//设置日志级别
io.set('log level', 1);
var randomNum = 1;
//WebSocket连接监听
io.on('connection', function (socket) {
socket.emit('open');//通知客户端已连接
// 打印握手信息
// console.log(socket.handshake);
// 构造客户端对象
socket.on('join',function(msg){
// socket.emit('join');
socket.broadcast.emit('join');
});
// 对message事件的监听
socket.on('message',function(msg){
// 返回消息(可以省略)
// socket.emit('message',msg);//所有人都可以收到
// 广播向其他用户发消息
socket.broadcast.emit('message',msg);//除了自己以外的可以收到
});
socket.on('reconnect_attempt',function(msg){
});
//监听出退事件
socket.on('disconnect', function () {
var obj = {
time:getTime(),
color:client.color,
author:'System',
text:client.name,
type:'disconnect'
};
// 广播用户已退出
socket.broadcast.emit('leave');
});
});
//express基本配置
app.configure(function(){
app.set('port', process.env.PORT || 3009);
app.set('views', __dirname + '/views');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
});
app.configure('development', function(){
app.use(express.errorHandler());
});
// 指定webscoket的客户端的html文件
app.get('/', function(req, res){
res.sendfile('views/chat.html');
});
server.listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});
结语
在写的时候参考了此博客 www.cnblogs.com/dreamsqin/p…
原理比较清楚 我这边就比较简单了 记录下思路