vue+websocket+express+mongodb实战项目（实时聊天）

在线观看 http://www.qiufengh.com:8081/#/ 继上一个项目用vuejs仿网易云音乐（实现听歌以及搜索功能）后，发现上一个项目单纯用vue的model管理十分混乱，然后我去看了看vuex，打算做一个项目练练手，又不想做一个重复的项目，这次我就放弃颜值，打算走心派。结合了后台nodejs，以及数据库mongodb来开发了一个实时聊天系统。这个系统可以说是一统江山，也算是实现前端程序员的一个梦了，前后通吃。自认为是一个比全的项目。项目地址：https://github.com/hua1995116/webchat 觉得好的请顺手来个star。 功能实现 1.注册与登录 2.实时聊天 3.与机器人聊天 4.个人中心 技术栈

• 前端 vue，vue-router ,vuex
• 后端 nodejs，express
• 数据库 mongodb
• 通讯 websocket
• 脚手架工具 vue-cli 结构 ├─build ├─config ├─models(存放mongoose对象) ├─schemas（存放mongoose的schemas模型） ├─src │ │ App.vue │ │ main.js（主入口） │ ├─assets
  │ ├─components （组件） │ ├─router（vue-router路由） │ └─store（vuex） └─static（静态资源） 首先用脚手架工具构建一个项目。像这样：

vue init webpack my-project-name

结构大致是这样的 好！既然我们是实战项目，我就不多说这些配置问题。不然又跑题了。不然又要被小哥哥小姐姐们打了。 前端 components/Chat.vue

created() {
    const that = this
    this.socket = io.connect('http://qiufengh.com:8081')
    this.socket.on('message', function(obj) {
        that.$store.commit('addroomdetailinfos', obj)
        window.scrollTo(0, 900000)
    })
    this.socket.on('logout', function (obj) {
        that.$store.commit('setusers', obj)
    })
},

this.socket = io.connect('http://qiufengh.com:8081')

这一句，主要用于连接你当前的服务，到时候下载后面的项目时，记得改成自己的服务以及端口。因为是在Index和Chat都有设置，所以你需要在Index.vue和Chat里的connect都改成你自己的服务。socket.on()用于接受消息。socket.emit() 用于发送消息。不懂的socket.io的看这里socket.io。有了这个就可以和服务端进行交互。等会讲解服务端。 由于字数问题，不能讲解服务器端，服务器端请大家移步，我的github地址。https://github.com/hua1995116/webchat/ 地址：https://github.com/hua1995116/webchat 在线观看地址：http://www.qiufengh.com:8081/#/

npm install -----安装依赖
npm run dev -----运行
npm run build -----打包
node prod.server.js -----打包后运行
//记得替换
Index.vue和Chat.vue下的io.connect('http://qiufengh.com:8081')
http://qiufengh.com:8081改成自己的项目地址。

最后上几张图。