uni-app websocket的服务请求使用

刺骨的言语ヽ痛彻心扉 2023-01-16 11:13 190阅读 0赞

<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>

效果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]  
连接：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 1]

输入信息并发送信息：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]: /images/20221022/c29a667a5efb4633913673f5c833764a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 1]: /images/20221022/65bf18defe274dd484c48032b00d16bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 2]: /images/20221022/36f505f1e821432e8c34bd482f95765c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 3]: /images/20221022/a607921f4e0b4176b2661067aeedb602.png