Vuecli使用scoket.io实现群聊

• Vuecli使用scoket.io实现群聊

• 2020-03-20 23:16
• 今天的目标是完成一个实时的一个聊天室，到现在也只完成了半成品而已
• 上图：
• 
• 
• 
• 
• 
• 目前只完成了登录之后会实时提示谁登录，发送消息还没完成，不过经过这一天的研究，明天完成应该问题不大
• 知识点：

• Vuecli知识点

• 使用到的是路由的功能来实现各个页面之间的跳转，流程是点击注册，进入注册界面，注册成功后进入登录界面，登录成功后进入聊天室
• 因为使用的是scoket.io.js 所以在main.js中需要先引入和给Vue实例挂载上scoket.io
• 
• connection是后端也就是express框架服务器的端口号，我们是通过是否访问了服务器来判断是否要聊天的

• CSS知识点

• css知识点蛮简单的，只要花时间都会做的出来，有一个需要知道的是定位的使用会比较多

• 后端部分

• 
• 后端使用的是express框架 为了更好的处理json数据，可以引入body-parser
• j将scoket.io挂载到这个服务器上
• 
• 给io绑定事件 connection是其他消息事件的基础，所以其他的一些发送消息事件都是写在connection事件里面，
• 再里面的一个传输事件的事件名是自定义的，只要前后端的io事件名是一样的，就可以相互之间传递数据，服务器向前端广播数据是使用io.emit(‘事件名’，消息)

• JS

• 前端接收，因为使用的是脚手架开发方式，所以再组件中有一个sockets对象
• 
• connect 表示连接成功后处理的事情，
• 之后的一些returns之类的都是属于接收后端广播来的事件的事件名，value就是广播来的值，也就是说后端 io.emit（‘事件名’，数据）和这个是对应的
• 前端向后端传递值
• 
• 通过methods绑定方法，使用 this.$socket.emit(‘事件名’, 值)，这个和后端的io事件也是相互呼应的，如下
• 总的来说 scoket.io.js是一个可以双向传输数据的一个JS模块，就因为有这个机制，所以可以用来做聊天室，不得不说 写出这个模块的作者真的是大佬，现在的我们都是站在巨人的肩膀下编程，省了很大的力气
• 现在是23：35 今天代码就到这，剩下的聊天气泡明天再完成，撒花~~