[网络协议]webSocket简单应用(五、前端处理)

对于前端而言编写的方法相对比较简单了

首先是建立webSocket连接，这一步中会检测浏览器是否支持webSocket，如果支持则将http协议升级为TCP协议并发送连接到服务器。连接路径的格式和后端的连接暴露点格式一致。连接建立后开启webSocket的监听事件。

this.webscoket.onopen监听连接事件，后面跟着的是连接建立后调用的方法。同样的道理开启接收关闭和发送的事件的监听，以达到和服务器实时交流的目的，基础的写法就是这样的，这里截取了项目中一部分代码，无论是参数还是后续对数据的处理，根据项目需要加就行了。

  init: function () {
        if(typeof(WebSocket) === "undefined"){
          alert("您的浏览器不支持socket")
        }else{
          // 实例化websocket
          var hostMy=window.location.host;
          this.myAccount= sessionStorage.getItem('user')
          var sort=this.$route.query.sort
          var classId=this.$route.query.id
          this.myRoomId=this.$route.query.account//老师账号
          this.webUrl="ws://"+this.host+"/webSocketRoom/"+this.myAccount+"/"+ this.myRoomId+"/"+classId+"/"+sort;
          this.webSocket = new WebSocket(this.webUrl)
          // 监听socket连接
          this.webSocket.onopen = this.open
          // 监听socket连接
          this.webSocket.onmessage = this.getMessage
          // 监听socket错误信息
          this.webSocket.onerror = this.error
          // 监听socket消息
          // this.webSocket.onmessage = this.sendMessage
          //监听close事件
          this.webSocket.onclose = this.close
          // this.webSocket.onclose = this.closeThisRoom
        }
      },