本项目是基于vue2的在线聊天室，使用Express轻量级web开发框架搭建聊天室服务器端，Socket.io实现服务器端和客户端的Websocket实时双向通讯，同时兼容低版本AJAX连接方式。 采用Vue + Vue-router 视图层双向数据绑定框架，进行组件化开发。并使用nginx实现项目热部署，反向代理单个云主机IP上的多个Virtual Host，实现负载均衡。
- 喜欢的请点心，关注，star ,fork,这些是我坚持下去的动力
- demo地址 demo （请用chrome的手机模式预览）
- 本项目地址github地址
- 手机扫一扫，直接预览
- nodejs : node服务器运行环境
- express : Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，使用它来搭建聊天室的服务器端
- websocket: 本例核心，推送服务器消息到所有人
- socketio: websocket第三方库
- vue + router: 视图层双向数据绑定框架，用来简化开发、组件化开发
- es6语法: 就是好用简洁哈哈
- nginx: 实现项目热部署，反向代理云主机ip上多个virtual Host。
通过npm安装本地服务第三方依赖模块(需要已安装Node.js)
npm install
启动服务(http://localhost:8080)
npm run dev
发布代码
npm run build
├── build // 构建服务和webpack配置 ├── config // 项目不同环境的配置 ├── dist // 项目build目录 ├── index.html // 项目入口文件 ├── package.json // 项目配置文件 ├── src // 生产目录 │ ├── assets // 图片资源 │ ├── common // 公共的css js 资源 │ ├── components // 各种组件 │ ├── App.vue // 主页面 │ ├── vuex // vuex状态管理器 │ ├── router.js // 路由配置器 │ └── main.js // Webpack 预编译入口
- 兼容不支持WebSocket的低版本浏览器。
- 允许同名用户。
- 在线人数实时更新。
- 用户上线或退出，所有在线的客户端实时更新。
- 用户发送消息，所有客户端实时收取
- 左右滑动切换特效
- 等等
支持enter和按钮发送信息
<input class="chat-input" type="text" name="" @keyup.enter="send(msg)" v-model="msg">
<span class="btn" :class="{'primary':!!msg}" @click="send(msg)">发送</span>通过绑定vue的click和keyup.enter事件，发送信息
根据聊天框有无信息，按钮样式动态改变
<span class="btn" :class="{'primary':!!msg}" @click="send(msg)">使用v-bind 设置btn的primary类，如果msg内容不为空，则primary设为true
通过vue的路由全局钩子，配合HTML5的sessionStroage进行登录验证
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
if (sessionStorage.getItem('userid')) { // 判断当前用户是否存在，实际应用中应该与后台数据进行验证，此例子只读取localstorge
next()
} else {
// console.log()
next({path: '/login'})
}
} else {
next()
}
})使用Element.scrollIntoView() 方法，当聊天信息超过一屏时，聊天信息组件自动滚动到浏览器窗口的可视区域内。
在message组件挂载时：
mounted () {
this.$el.scrollIntoView()
},为了解决这个问题，我不再让信息发出者直接在聊天记录中显示自己发出的信息。而是让他也从服务器端接收到自己刚刚发出的信息后，再显示到聊天记录中。这样如果用户断线了，他就无法看到自己发出的信息，便能够意识到自己刚刚发的信息没有成功送出，以此避免沟通上的误会。为此，上面提到的 socket.broadcast.emit() 需要改成 io.sockets.emit() 这样信息发出者也能收到自己发出的信息。显然这一改动对聊天室的性能影响微乎其微，却很好的解决了沟通发生误会的问题。
- 我的另一个vue实战项目vue-gank已经上线，配有详细的教程解释
- 如果喜欢一定要 star哈!!!（谢谢!!）
- 如果有意见和问题 请在 lssues提出，我会在线解答。