uni-app websocket的服务请求使用

<template>
  <view>
    <page-head title="websocket通讯示例"></page-head>
    <view class="uni-padding-wrap">
      <view class="uni-btn-v">
        <view><textarea value="" v-model="txtinfo" placeholder="" class="txtarea" /></view>
        <view class="websocket-msg">{{ showMsg }}</view>
        <button type="primary" @click="connect">连接websocket服务</button>
        <button v-show="connected" type="primary" @click="send">发送一条消息</button>
        <button type="primary" @click="close">断开websocket服务</button>
        <view class="websocket-tips">发送消息后会收到一条服务器返回的消息（与发送的消息内容一致）</view>
      </view>
    </view>
  </view>
</template>

<script>
let platform = uni.getSystemInfoSync().platform; //手机类型
console.log(platform);
export default {
  data() {
    return {
      connected: false,
      connecting: false,
      socketTask: false,
      msg: false,
      txtinfo:""
    };
  },
  onLoad() {
    // 获取系统信息
    console.log(this.txtinfo);
  },
  computed: {
    showMsg() {
      if (this.connected) {
        if (this.msg) {
          return '收到消息：' + this.msg;
        } else {
        }
      } else {
        return '尚未连接';
      }
    }
  },
  onUnload() {
    uni.hideLoading();
    if (this.socketTask && this.socketTask.close) {
      this.socketTask.close();
    }
  },
  methods: {
    connect() {
      if (this.connected || this.connecting) {
        uni.showModal({
          content: '正在连接或者已经连接，请勿重复连接',
          showCancel: false
        });
        return false;
      }
      this.connecting = true;
      uni.showLoading({
        title: '连接中...'
      });
      this.socketTask = uni.connectSocket({
        url: 'wss://echo.websocket.org',
        data() {
          return {
            msg: 'Hello'
          };
        },
        // #ifdef MP
        header: {
          'content-type': 'application/json'
        },
        // #endif
        // #ifdef MP-WEIXIN
        method: 'GET',
        // #endif
        success(res) {
          // 这里是接口调用成功的回调，不是连接成功的回调，请注意
          console.log(res);
        },
        fail(err) {
          // 这里是接口调用失败的回调，不是连接失败的回调，请注意
        }
      });
      console.log(this.socketTask);
      this.socketTask.onOpen(res => {
        this.connecting = false;
        this.connected = true;
        uni.hideLoading();
        uni.showToast({
          icon: 'none',
          title: '连接成功'
        });
        console.log('onOpen', res);
      });
      this.socketTask.onError(err => {
        this.connecting = false;
        this.connected = false;
        uni.hideLoading();
        uni.showModal({
          content: '连接失败，可能是websocket服务不可用，请稍后再试',
          showCancel: false
        });
        console.log('onError', err);
      });
      this.socketTask.onMessage(res => {
        this.msg = res.data;
        console.log('onMessage', res);
      });
      this.socketTask.onClose(res => {
        this.connected = false;
        this.startRecive = false;
        this.socketTask = false;
        this.msg = false;
        console.log('onClose', res);
      });
      console.log('task', this.socketTask);
    },
    send() {
       console.log(this.txtinfo);
      this.socketTask.send({
        data: '来自' + platform + ' : ' + this.txtinfo,
        success(res) {
          console.log(res);
        },
        fail(err) {
          console.log(err);
        }
      });
    },
    close() {
      if (this.socketTask && this.socketTask.close) {
        this.socketTask.close();
      }
    }
  }
};
</script>

<style>
.txtarea {
  width: 100%;
  height: 150px;
  background-color: #646566;
  text-indent: 10px;
  padding-top: 10px;
  color: #ffffff;
  font-size: 14px;
  letter-spacing: 1px;
  font-family: '黑体';
  line-height: 25px;
  padding-left: 10px;
  padding-right: 10px;
}
.uni-btn-v {
  padding: 10rpx 0;
}

.uni-btn-v button {
  margin: 20rpx 0;
}

.websocket-msg {
  padding: 40px 0px;
  text-align: center;
  font-size: 14px;
  line-height: 40px;
  color: #666666;
}

.websocket-tips {
  padding: 40px 0px;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  color: #666666;
}
</style>

效果如下：

连接：

输入信息并发送信息：