boom-websocket-client

搞了个pusher服务结果想着客户端也整一个算了。

安装

  npm install boom-websocket-client --save

使用

（1）页面

import socket from "boom-websocket-client";

 //建立socket连接
socket.initWebSocket(url);

//建立连接的时候如需传递参数给服务端
let uid = 1;
socket.initWebSocket(url, uid);

（2）全局

/** ---------------------引入websocket客户端 （main.js）-------------------**/
import socketApi from 'boom-websocket-client';
Vue.prototype.socketApi = socketApi;

 /** ----------------建立socket连接--------------------------**/
this.socketApi.initWebSocket(url);

//建立连接的时候如需传递参数给服务端
let uid = 1;
this.socketApi.initWebSocket(url, uid);

/** --------------------发送消息到服务端--------------**/
this.socketApi.sendSock(data);

// 接收socket回调函数返回数据的方法
getConfigResult(res) {
  console.log(res);
},
this.socketApi.sendSock(data, this.getConfigResult);

/** --------------------关闭--------------**/
this.socketApi.webSocketClose();

简单例子

<template>
  <div>
    <div>在此页面使用封装的socket</div>
    <el-input class="tool-input" placeholder="请输入" v-model="msg"></el-input>
    <el-button v-on:click="handleSendMsg">提交</el-button>
  </div>
</template>
<script>
  export default {
      name: 'Index',
      components: {},
      data() {
          return {
              ws: false,
              wsUrl: " ws://127.0.0.1:12222/",//定义socket连接地址
              uid: 1,
              wsType: "CONNECT",
              msg: ''
          }
      },
      created() {
          //建立socket连接
          this.socketApi.initWebSocket(this.wsUrl,this.uid);
          //data为和后端商量好的数据格式
          const data = {
              type: this.wsType,
              msg: "说的话",
          };
          this.websocketSend(data);
      },
      destroyed() {
          this.socketApi.webSocketClose();
      },
      mounted() {

      },
      methods: {
          initData() {
              setTimeout(() => {

              }, 500);
          },
          handleSendMsg(){
              this.websocketSend(this.msg);
          },
          // 接收socket回调函数返回数据的方法
          getConfigResult(res) {
              console.log(res);//服务端返回的数据
          },
          websocketSend(data) {
              //data为要发送的数据，this.getConfigResult为回调函数，用于在此页面接收socket返回的数据。
              this.socketApi.sendSock(data, this.getConfigResult);
          },
      },
  }
</script>

说明

• 该版本基本满足使用，后续将看情况更新