精华 vue+websocket+express+mongodb实战项目(实时聊天)
发布于 7 年前 作者 hua1995116 7994 次浏览 最后一次编辑是 7 年前 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

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改成自己的项目地址。

最后上几张图。 这里写图片描述 这里写图片描述 这里写图片描述 这里写图片描述

回到顶部