使用vue+websocket实现在线聊天功能（项目包含功能，包含websocket连接过程中的采坑）

近期有一个新的需求，在后台管理系统中加入售后服务人员与客户的在线聊天功能，使用的技术是vue与websocket。我第一次接触，包括从页面的创建到真正实现聊天功能，对我而言都是全新的。我想把在这一过程中，遇到的问题，解决方式，学习思路记录下来。

一、关于socket.io

Socket.IO是node.js的一个模块，它是通过WebSocket进行通信的一种简单方式。WebSocket协议很复杂，从头开始写一个支持WebSocket的应用程序将需要花费很多时间。Socket.IO提供服务器和客户端双方的组件，所以只需一个模块就可以给应用程序加入对WebSocket的支持。Socket.IO也解决了各浏览器的支持问题（不是所有浏览器都支持WebSocket）并让实时通信可以跨几乎所有常用的浏览器实现。Socket.IO的设计非常好，将实时通信带入应用程序的过程便得非常简单。如果想做任何涉及在web服务器和浏览器之间通信的事情，那么nodejs和Socket.IO是极好的选择哦！

# npm安装socket.op
$ npm install --save socket.io

二、连接websocket的方式及携带token方式

连接websocket 的方式我所接触过的包括原生方式，代码如下：
`initWebSocket () {
    // 初始化websocket
    const wsuri = 'wss://XXXXXXXXXXXXXX/ws/adminOnlineService'
    this.websock = new WebSocket(wsuri)
},`
对于我的项目而言，这样连接报错500，原因是没有携带token，该方式携带token的方式我所了解的如下：
（1）send发送参数，这种方式的劣势为每次发送消息，都会重新连接一次websocket；
（2）请求地址中带参数，如：var  wss = new WebSocket("wss://" + url?token + "/webSocketServer");
（3）基于协议头：this.websock = new WebSocket(wsuri, ['Bearer' + store.state.token])；
经历了一番尝试之后，我认为无论采用哪种方式，都需要跟服务端协商，即前端传什么样的类型，后端应采用相应的处理方式，不要轻易否定任何一种方式，这是一个尝试的过程。之所以这样说，是因为前端尝试了很多种方式，最终决定放在请求地址中，此时服务端做相应的处理。
连接websocket的另一种方式是使用socket.io-client
`onConnect: () => {
      console.log('connect')
      this.message = 'connect'
    },
    onDisconnect: () => {
      console.log('disconnect')
      this.message = 'disconnect'
    },
    connect: () => {
      let socket = io('wss://XXXXXXXXXXX', {
        path: '/welfare/ws/adminOnlineService',
        query: {
          'Authorization': 'Bearer  abdadfssadfasdf'
        }
      })
      socket.connect()
}`
这样在请求的时候会带上token，但是同样token会拼在url中，需要服务端进一步做处理。该方式连接成功，但是遇到的问题是在连接成功之后，会断连，之后会立马连接，如此循环，直到刷新页面为止。该问题还没有解决。但是原生方式没有存在该问题，连接一次即可。
除上述两种方式外，在解决连接websocket问题的过程中，还看到其他方式，我们没有做进一步的尝试。

三、在点击登录按钮时就进行websocket的连接

点击登录按钮即连接websocket，要求定义全局方法，采用vuex，对于vuex的使用我本身比较陌生，但是在大牛的帮助下实现了，我会在下一篇文章中以连接websocket为例，讲述vuex的详细使用方法。

至此，前期准备工作就已经做好了，聊天功能待进一步完善。

四、websocket的事件和方法

//实例化一个WebSocket对象，并传入要连接的决定URL
var socket = new WebSocket("url");//    url中要使用ws://来代替http:// ;使用wss来代替https://
//当成功建立连接时会触发open事件
socket.onopen = function(){
    alert("established");
}
//当发生错误时会触发error事件
socket.onerror = function(){
    alert("error!");
}
//当连接关闭时会触发close事件
socket.onclose = function(){
    alert("closed!");
}
//使用send() 方法发送数据 只能接受字符串 json对象要先序列化成json字符串
socket.send(str);
//当服务端像客户端发来消息，WebSocket对象就会触发message事件
socket.onmessage = function(event){
    console.log(event.data);//返回的数据 也为字符串形式
}
//调用close()方法 会关闭Web Sockets连接，可在任何时候调用close（）方法
 socket.close();