VChat - 一个通讯社交类WebApp，本文用于记录开发遇到的磕磕绊绊和技术点。

使用JWT(JSON WEB TOKEN)做接口权限设计

接口权限，即在客户端发送请求的时候，需要带上一个服务器给予的token，服务器根据该token判断该客户端是否可以获取资源或进行某些操作。

exm:
登陆成功时生成token给到客户端，客户端把token存在本地，每次请求时带上。

router.post('/signin',(req,res)=>{let pars = req.body,username = pars.username,password = pars.password,sql = $userSql.getByAccount;// 根据username 找出用户信息 利用uid生成tokenconn.query(sql,username,(err,result)=>{if(result[0]){let user  = result[0]if(user.upassword === password){let secret = 'i am a good man'; //密钥//设置tokenlet token = jwt.sign({ user }, secret, { expiresIn:  60 * 60 * 1 });res.json({'result':'登陆成功','token':token,'uid':user.uid})}else{res.json({'result':'密码错误'})}}else{res.json({'result':'用户不存在'})}});
});

客户端发送请求，服务端验证token

router.get('/friends',(req,res)=>{let token = req.query.token,secret = 'i am a good man',//密钥friSql = $friSql.getById,userSql = $userSql.getById;jwt.verify(token, secret, function (err, decode) {if (err) {  //  时间失效 或者 遇到伪造的tokenres.json({'info':err})} else {// decode中就含有我们用于生成token的信息，我用的是uidlet user = decode.user;let uid = user.uid;}});
});// 前端使用axios请求
this.$axios.get('/api/user/friends',{params:{token: window.localStorage.getItem('token')}
}).then(res=>{if(res.data['result']){this.friends = res.data['result']}})

使用Socket.io 做点对点通信

流程：

1.用户登陆成功后，与服务器发起socket连接。

2.服务器使用一个users对象来保存用户与socket之间的映射，每当socket断开，都要更新users。每次用户断开连接时，都要将users[uid] 置为 null。每次连接时再分配新的socketId。

let users = {uid1: socketId，uid2: socketId
}

3.在sender发送信息给receiver时，是利用receiver的uid去获取其socketId来发送，但如果receiver不在线，其socketId自然为null，这时候需要先让服务器保存sender发送的信息，在下一次receiver连接socketId时将这些信息发给receiver。

// 存放离线信息
let unline_data = [// uid2 为接收方uid2 : [{senderId :msg :},.......]
];

每次客户端上线时检查有没有离线信息给该客户端的，有的话发送，并清空该客户端离线信息。

//  连接成功
let hisMsg = unline_data[conn_uid] ? unline_data[conn_uid]:'没有新消息';
let initMsg = {msg: `${conn_uid} 连接成功 给你分配的socketId为${users[conn_uid].id}`,hisMsg: hisMsg
};
socket.emit('receiveMsg',{msg: initMsg,code: 200
});unline_data[conn_uid] = null; // 清空离线信息

完整代码

let users = {// 'uid':'socketId'
};// 存放离线信息
let unline_data = [/*// uid2 为接收方uid2 : [{senderId :msg :},.......]*/
];io.on('connection',function(socket) {// 存储连接用户的uid 和 socketId映射let conn_uid = socket.request._query.uid;users[conn_uid] = socket;//  连接成功let hisMsg = unline_data[conn_uid]? unline_data[conn_uid]:'没有新消息';let initMsg = {msg: `${conn_uid} 连接成功 给你分配的socketId为${users[conn_uid].id}`,hisMsg: hisMsg};socket.emit('receiveMsg',{msg: initMsg,code: 200});unline_data[conn_uid] = null; // 清空离线信息// 这里监听 disconnect，就可以知道谁断开连接了socket.on('disconnect', function () {Object.keys(users).forEach(k=>{if (users[k] && users[k]===socket){users[k] = false}});console.log('socket disconnect: ' + socket.id);});//接收数据 并转发给相应的用户 实现单点聊天socket.on('sendMsg', function (obj) {let uid = obj.uid;let uid2 = obj.uid2;let msg = obj.msg;let data = {senderId: uid,receiverId: uid2,msg: msg};// 接收方在线(socket连接中)if(users[uid2]){users[uid2].emit('receiveMsg',data);}else{// 对方不在线，用数据结构先纯起来if(! (Object.prototype.toString.call(unline_data[uid2]).slice(8,-1) === 'Array')){unline_data[uid2] = []}unline_data[uid2].push(data)}});
});

用Vuex管理Socket

router.beforeEach((to,from,next)=>{let uid = window.localStorage.getItem('uid');let socket = store.getters.getSocket;// store中没有 就重新连接 并提交到store中if (!socket){store.dispatch('setSocket',io.connect('//192.168.137.1:3000',{'force new connection': true,'query': {uid:uid}}));//与服务器进行连接//监听接收信息store.getters.getSocket.on("receiveMsg",function (data) {let msg = data.msg;console.log(msg);});}next() // 继续跳转路由
});

Vuex：

import Vue from 'vue'
import Vuex from 'vuex'
import io from 'socket.io-client'
Vue.use(Vuex)const store = new Vuex.Store({state:{headTitle:'聊天',socket:null},getters: {getHeadTitle: function (state) {return state.headTitle;},getSocket:function(state){return state.socket}},mutations:{setHeadTitleFunc:function(state,title){state.headTitle = title;},setSocketFunc:function(state,socket){state.socket = socket}},actions:{setHeadTitle:function(context,title){context.commit('setHeadTitleFunc',title)},setSocket:function(context,socket){context.commit('setSocketFunc',socket)}}
});export default store

个人项目记录 -- VChat相关推荐

ssm 项目记录用户操作日志和异常日志
ssm 项目记录用户操作日志和异常日志参考文章: (1)ssm 项目记录用户操作日志和异常日志 (2)https://www.cnblogs.com/mei-m/p/10231792.html (3 ...
【个人项目】项目记录：github链接、设计实现、单元测试、性能分析与改进、PSP完成表格、总结反思
项目记录一.github链接链接:https://github.com/LLFKirito/SudokuWork-BIT1120161918/ 二.设计实现总体设计程序流程图如下程序分为ma ...
微信读书项目记录(1)
微信读书项目记录一.项目需求及阅读器引擎介绍 1.1epubjs阅读器引擎介绍,常用的类 Book,完成阅读器解析 Rendition,完成阅读器定位 Navigation,存储目录信息 View ...
STM32对接涂鸦wifi模块项目记录（智能插座完善版本）
应项目需求,客户需要对接涂鸦平台,从了解平台到样品实际落地,还是挺方便的, 做过的一个项目,人体感应智能插座项目,对接涂鸦云 : 硬件平台:STM32F103 WIFI模块: 涂鸦WiFi(型号见文章 ...
项目记录: 3DOF+实时渲染之虚拟视点合成
项目记录: 3DOF+实时渲染之虚拟视点合成总结一下实现3DOF+渲染的一些细节. 虚拟视点合成 3DOF+实时渲染方案 0. 3DOF+概念关于 3DOF+ 概念可以参考我之前的博文. 3 ...
架构之路--实战项目记录（二）忘记数据库开始抽象
对我而言,认识BLL层的作用,或者领域模型驱动的含义,最大的干扰来自数据库. 我们很清楚的知道UI层的含义,也知道数据层是做什么的.但对于一个简单的(甚至是相当复杂的)系统而言,实在不知道除了对数据库 ...
项目记录 Gadget桌面帮助系统
本文主要记录Gadget相关开发.项目架构和项目中使用到的一些关键技术. 项目名称: Gadget桌面帮助系统开发环境: VS 2008 Silverlight 3.0 Beta Sql Serve ...
人脸识别+检索项目记录
趁空闲时间,记录一下做过的一个实验室项目,主要分为4个部分:1)语音转文字:2)人脸识别:3)行人识别:4)检索.本人负责人脸识别和检索模块及整体项目的融合,在此介绍一下自己所做的两个模块. 背景对 ...
一体化3团队项目记录
github项目地址:https://github.com/yitihua/pilipili 小组成员: 姓名学号 gitID 应用技术顾思宇 2016011993 dandelionClaw 全 ...

个人项目记录 -- VChat

使用JWT(JSON WEB TOKEN)做接口权限设计

使用Socket.io 做点对点通信

完整代码

用Vuex管理Socket

个人项目记录 -- VChat相关推荐

最新文章

热门文章