寫了個簡單的DEMO,不懂操作的同學可以看看,安裝 vue 就不多說了呆贿,官方文檔很詳細
#安裝服務器端
npm install --save socket.io
npm install --save express
npm install --save request
npm install --save redis
#安裝客戶端
npm install --save socket.io-client
#安裝VUE庫
npm install --save vue-socket.io
在vue的 main.js 里寫上
//與服務端鏈接
import VueSocketio from 'vue-socket.io';
import socketio from 'socket.io-client'
Vue.use(VueSocketio, socketio('ws://127.0.0.1:3000',{
query: 'token=1234567'
}));
編輯 App.vue,編寫事件方法
<script>
export default {
name: 'app',
sockets:{
//跳轉(zhuǎn)登陸界面
auth_to_login:function(){
this.$router.push({ name: 'login'});
},
//跳轉(zhuǎn)到首頁
auth_to_index:function(){
this.$router.push({ name: 'Index'});
}
}
}
</script>
服務端端代碼
let socketIo = require('socket.io');
let express = require('express');
let request = require('request');
let redis = require('redis');
let redisClient = redis.createClient;
let httpPort = 3000;
let channelId = 1
let app = express();
app.get('/',function(req,res){
res.send('啟動成功:' + httpPort);
});
//連接redis
let cache = redisClient({ port: 6379, host: '127.0.0.1' });
let server = require('http').createServer(app);
let io = socketIo(server);
io.on('connection',function(socket){
console.log('有客戶端連接' + socket.id);
//取得token
let token = socket.handshake.query.token;
//根據(jù)token看是否有效登陸狀態(tài)
if (!token){
console.log('沒有授權(quán)');
socket.emit('auth_to_login');
return false;
}else{
#通過取得redis cache判斷
cache.get(token, function (err, response) {
if (!response){
console.log('賬號過期');
#通知客戶端
socket.emit('auth_to_login');
//當然也可以使用 disconnect 斷開鏈接,如果是單頁應用做入,斷開后記得要重新建立連接
//socket.on('disconnect', function() {});
}else{
#通過API判斷
let result = request({
url: 'http://xx.com/user/check',
method: "POST",
json: true,
headers: {
"content-type": "application/json",
"charset":"UTF-8",
},
body: {token:token}
}, function(error, response, body) {
if (!error && response.statusCode == 200) {
body = JSON.stringify(body)
result =JSON.parse(body)
if (result.code == 0){
#通知客戶端
socket.emit('auth_to_index');
}
}
});
}
});
return false;
}
});
server.listen(httpPort); //用server連接
啟動socket服務器
執(zhí)行 node app.js