一、项目介绍
用到的所有工具除了node.js，其他都是第一次接触，没有什么深刻理解，只基于个人边学边做的经验，记录一下此项目，并供同样想实现类似项目的小伙伴们参考。另外分享一下初期入手时很有帮助的vue+vuex基础视频，也是论坛中别人分享的，原链接打不开了，附上我的网盘分享：https://pan.baidu.com/s/1z2v4qffxFiYG-Nsav8Sxrg 密码：ajxb
项目体验地址：112.74.53.108/dist （电脑上打开时请按F12然后点击Toggle device mode或ctrl+shift+M）
github：https://github.com/GaoMinjian/mychat
实现的主要功能：
1.登录与注册
2.群聊与私聊
3.已存在的会话显示在首页，并动态更新显示的最新信息，如图：
4.个人资料如头像、昵称的更改
5.退出登录
ps:如有其它功能添加或修改意见欢迎留言
二、所用框架或库介绍
package.json:
"less": "^3.7.1",
"less-loader": "^4.1.0",
"mint-ui": "^2.2.13",
"mongoose": "^5.2.5",
"socket.io": "^2.1.1",
"socket.io-client": "^2.1.1",
"style-loader": "^0.21.0",
"uws": "^10.148.1",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vue-socket.io": "^2.1.1-b",
"vuex": "^3.0.1"简单介绍：
个人经验，安装插件在命令窗口中直接
#npm install -g xx在项目中无法使用，需在项目目录下或用软件打开项目后在terminal中输入命令(一定不能少了--save，不然不会写入到packge.json中，以后分享源码给别人时别人就无法安装项目所有的插件)：
#npm install --save xxxless：css扩展语言，此项目中只用到一种用法，应该都看得懂。
mint-ui：饿了么开发的框架，包含手机端界面各种组件，虽然有些时候没有自己写用着那么如意，但是能很大地提高效率。官方文档：http://mint-ui.github.io/docs/#/zh-cn2
mongoose：node中对MongoDB进行操作的API。MongoDB安装最后一步一定要取消勾选左下角的选项，不要试水...(盗图)
socket.io及相关API：实现客户端（就是我们打开项目页面的窗口）与服务端（就是# node xxx.js 起的服务）实时的请求、广播交互。如客户端设置监听命名为x的广播，服务端发送名为X的广播，客户端便能收到作为参数的数据。socket.io在不了解概念的时候会被客户端服务端之类的搞晕，个人查网上文章并尝试了两整天才成功实现最简单的通信（很多网上的方法不适用），想明白了后其实很简单。不管看哪篇文章最好都结合官方文档https://socket.io/docs/
vuex：同级组件间共享数据，此项目中仅仅用来储存数组，其他数据都用sessionStorage储存，没有特殊复杂需求的话如果为了学习一下如何使用可以用一下，不然不如自己写个js文件来储存数据。
三、项目的目录结构
其中dist为项目打包后生成的文件夹，mychat为guthub仓库，均与项目本身无关。
node_modules中为项目中所有安装的插件。
src中一般存放项目制作过程所有新建的文件，根据个人习惯，我在assets中存放所有的css,js,图片等静态资源，components放置组件，page中放置主要页面。
router的index.js的功能是将所有的vue页面暴露给路由（vue中所有组件都需暴露后才可被引用），即暴露给App.vue
main.js则对应了App.vue，是对全局的引用，第二步中用到的组件均需在这里引用，代码如下：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App'
import router from './router'
import VueSocketio from 'vue-socket.io'
import socketio from 'socket.io-client'
import store from './vuex/store'
Vue.use(VueSocketio, socketio('http://localhost:3000'))
Vue.use(MintUI)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})项目制作过程中根据功能增加的文件（非项目建立时固有文件）：
database中db.js，在服务端的node文件中被引用，相当于在js中模拟mongo数据库中具体的某个表，不管是对某个表的什么操作，都根据schema中定义的数据。mongoose教程（必看）：http://cw.hubwiz.com/card/c/543b2e7788dba02718b5a4bd/1/1/1/
四、服务端即Node文件
let http = require('http');
let user = require('./database/db').user; //mongo model
let privateHistory = require('./database/db').privateHistory;
let groupHistory = require('./database/db').groupHistory
let socketId = [],users = []//用账号对应客户端 储存socket连接
let server = http.createServer(function (req, res) {
}).listen(3000);//创建http服务
console.log('Server running ');
var io = require('socket.io').listen(server);node中与服务相关的只有创建一个http服务并监听端口，再让socket监听此服务，3000端口只是我使用的，可以自己更改，但是在App.vue中，socket发送请求的端口也要相应更改。
示范一下socket.io的用法：
服务器端（js）中监听客户端连接及其他信息：
io.sockets.on('connection', (socket) => { //监听客户端连接，返回当前socket
console.log('链接成功'+ socket.id);
user.find({},function (err,docs) { //在user关联的表中查找所有数据
socket.emit('allUsers',docs) //给当前客户端发送广播
})
socket.on('login', (data) => {
... ...
}客户端中监听‘allusers’广播：
sockets: { //所有广播的监听必须写在sockets中
allUsers (docs) {
this.$store.state.allusers = docs //储存到vuex中
}
}五、小结
大概介绍了一下整个项目，尽量使新入门的小伙伴能看得懂，具体的内容可以从github中下载源码。有什么错误或讲解不详细的地方欢迎指正或提出。
另附几张项目界面(发现中的功能都没做)：
