基于Vue、Nodejs、Socket.io的聊天应用

写在最前

一直想实现一个聊天应用demo，尝试一下Socket.IO这个框架，同时看到网上的教程很多关于使用node开发聊天应用的demo都是聊天室形式的，也就是群聊，很少有实现私聊的。所以想自己实现一次。另外还尝试了在上传头像的时候接入腾讯云的万象优图API来上传下载注册用户的头像，事实证明确实蛮好用的=。=，只不过那个部署接口的服务器不知道什么时候就会没钱租了，所以可能并不能跑通上传功能T T。github地址

一、技术简介

Vue

Vue.js是一款在2014年2月开源的前端MVVM开发框架，其内容核心为为开发者提供简洁的API，并且通过实现高效的数据绑定来构建一个可复用的组件系统。

Nodejs

Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

MongoDB

MongoDB是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。

Socket.IO

Socket.IO是一个完全由JavaScript实现、基于Node.js、支持WebSocket的协议用于实时通信、跨平台的开源框架。
Socket.IO除了支持WebSocket通讯协议外，还支持许多种轮询（Polling）机制以及其它实时通信方式，并封装成了通用的接口，并且在服务端实现了这些实时机制的相应代码。
Socket.IO会根据浏览器对通讯机制的支持情况,选择最佳方式实现网络实时通信。

二、功能

• [x] 登陆
• [x] 注册
• [x] 通讯录
• [x] 聊天列表
• [x] 私聊
• [x] 群聊
• [x] 好友管理

三、重点功能实现

上传图片配合腾讯云

图片预览问题

因浏览器的安全限制，在input中提交的文件是不能获得文件的真实地址的这就导致无法直接通过地址来得到所需要的预览图。故可以使用一个HTML5API，FileReader对象。https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

上传到腾讯云

腾讯云接口的部署分为两个部分，一个是自己服务器做鉴权服务，另一个是腾讯服务器来存储图片。由图可以看到第一步需要从自己服务器中获取上传头像的地址，这一步就是鉴权服务，详细代码可以参照腾讯云官方文档。之后的如何上传到腾讯云也是使用官方的接口。文档相对详细，同时如果出现bug还可以发起工单向tx的工程师咨询。那次我的bug那边的工程师晚上11点给我打电话来解决=。=，所以如果你有一个程序员老公/老婆，请好好珍惜

私聊&群聊

本次私聊和群聊的界面由同一个组件复用，在前端页面需要判断渲染私聊还是群聊消息。同时后端也需要判断是群聊还是私聊消息模式。
通讯的前端逻辑如下所示：

通讯的后端逻辑如下所示：