vue +vue-socket 实现的一个聊天室项目
发布于 7 个月前 作者 luanxuechao 3169 次浏览 来自 分享

loopback-chat

这是一个运用前端框架VueJS,UI框架Iview的博客项目,后端使用Node框架LoopBack。(一开始打算写个blog,后来觉得还是写案例比较好,所以项目名称会有些奇怪）

演示

线上地址

DEMO

技术栈

功能列表

  • 登录
  • 注册
  • 根据姓名生成随机头像
  • 聊天
  • 添加好友
  • 实时消息通知
  • 根据好友昵称 分组 好友列表
  • 登出

项目简介

项目使用了socket.io,vue,docker,loopback,iview,不要问我为什么使用这些，因为这是我公司现在的技术栈，所以自己就做一些项目来练手，把公司的技术栈走通。因为自己以前是写AngularJS的，因为某些原因又开始用NodeJS 开发后端，现在在公司是专职后端开发，但是就是爱折腾，不舍得放弃前端。下面写一些这个感受(不喜勿喷)

vueJS vs Angular(1.xx)

我这里主要写的是angular1.xx的，因为是在实习期写的angular+gulp,如果有不对的地方可以指出(也许有些过时)。

  • 相似之处(方便理解)
    • angular的service 和 vue 中的vuex store 很像,都可以用来保存状态
    • store 的dispatch 和 angular 的 $broadcast emit 作用类似，但是有不同。比如说父子组件通信
    • vue 中每个components 中的this 指针 和angular 中的$scope 差不多，都是当前页面下一些变量
    • filter 的用法相类似
  • 不同之处
    • 我们习惯在angularJS中把所有方法都放在controller 中，无论是watch,页面生命周期的一些监听，都在controller里，但是在vueJS,把页面的变量定义都分开，分开成不同方法中,不知道我是不是因为后端开发，所以更喜欢angularJS 把controller service,router 都分开定义,把页面的业务(方法)都写在controller中，然后依赖注入（写过一段java，喜欢这种方式吧）。
    • angular 定义我更多的觉得它是从module开始的，每个module下面从router,controller,service,template,但是vueJS 让我更多觉得它是从components开始的,每个组件来组装成一个template。(理解不到位,可能写的不对）
    • angular 的双向绑定的脏值检测和双向绑定和vuejs 的单向数据流就省略了，网上说了很多了。

踩坑的几点

  • socket + redis
    • 以前一直很傻的以为socket +redis ,其实是吧socketId 放在redis 里，然后可以实现多线程通信，后来查了很久，才发现，socket.io 只是利用的redis pub-sub 的服务，socket.id 是不存在redis 里的！！！
    • vue 中this.$router 和this.$route 的区别，那天写代码，找个很久，关键还是自己不细心，路由传参一直拿不到，感觉很奇怪，后来才发现两个不是一个东西
    • vue 有个插件集成socket.io,叫vue-socket,但是我用的时候发现一个问题就是后端如果emit,如果想要dispatch,不能写成像文档一样，例如
      	后端		socket.to(messageModel.chatRoomId).emit('message', messageModel);
	前端的store actions 监听  
	文档写法
	actions: {
	 socket_Message: (context, message) => {},
	}
	正确写法
	actions: {
	 socket_socketMessage: (context, message) => {},
	}

项目缺点

  • css 写的很乱，本人css很烂，后期会重新整理一遍
  • 变量定义随意(后期重构的时候会考虑改一下)

结尾

还是那句话，如果有错的地方，欢迎大家指正，毕竟本人比较菜，毕竟写这么多是欢迎大家指出我的错误，能够成长，如果有同学不懂的地方，也欢迎提问，issue也行，当然想关注下去，也可以star 一下或者watch
回到顶部