小程序websocket电脑工具正常,真机连接不上
发布于 5 年前 作者 mchang 2258 次浏览 来自 问答

使用wepy框架开发,springboot服务器,使用小程序websocket开发聊天程序,电脑开发工具端时候正常,无问题。真机调试时缺连接不上websocket,而且不报错,请各位大神帮看看是什么问题,十分感谢!代码如下:

<style lang=“less”>
</style>
<template>
<view>
  <view class=‘websocket-bottom’>
    <view class=‘wb-left’>
      <input placeholder=‘信息’ value=’{{msg}}’ bindinput=‘megInput’></input>
    </view>
    <view class=‘wb-right’ catchtap=‘sendEvent’>
      <text>发送</text>
    </view>
  </view>
  <view class=‘websocket-list’>
    <repeat for="{{list}}" key=“index” index=“index” item=“item”>
      <view class=‘wlf-left’>我是用户{{item.userId}}:</view>
      <view class=‘wlf-right’>{{item.message}}</view>
    </repeat>
  </view>
</view>
</template>
<script>
import wepy from 'wepy’
let socketOpen = false
export default class Chat extends wepy.page {
  config = {
    navigationBarTitleText: ‘国网四平供电公司’
  }
  components = {}
  data = {
    msg: ‘’,
    list: []
  }
  computed = {}
  methods = {
    // 发送
    megInput(e) {
      let msg = e.detail.value
      this.msg = msg
    },
    sendEvent() {
      let that = this
      let msg = that.data.msg
      if (msg === ‘’) {
        wx.showToast({
          title: ‘信息不能为空’,
          icon: ‘none’,
          mask: true
        })
        return ‘’
      }
      if (socketOpen) {
        wx.sendSocketMessage({
          data: msg,
          success(res) {
            that.msg = ‘’
          }
        })
      } else {
        wx.showToast({
          title: ‘链接已断,重新链接’,
          icon: ‘none’,
          mask: true
        })
      }
    }
  }

  linkSocket() {
    let that = this
    wx.connectSocket({
      url: ‘wss://2p3z662313.51mypc.cn/client/wx’,
      success() {
        socketOpen = true
        that.initEventHandle()
        console.log(’-------------------connectSocket成功’)
      },
      fail() {
        console.log(’-------------------失败’)
      }
    })
  };

  // 链接成功之后处理
  initEventHandle() {
    let that = this
    wx.onSocketMessage((res) => {
      // 数据处理
      that.setMessage(res.data)
    })
    wx.onSocketOpen(() => {
      console.log(‘WebSocket连接打开’)
    })
    wx.onSocketError((res) => {
      console.log(‘WebSocket连接打开失败’)
      this.reconnect()
    })
    wx.onSocketClose((res) => {
      console.log(‘WebSocket 已关闭!’)
      socketOpen = false
      this.reconnect()
    })
  };
  setMessage(res) {
    let list = this.data.list
    list.push(JSON.parse(res))
    this.list = list
    // 刷新数据源
    this.$apply()
  };
  // 断线重连
  reconnect() {
    if (this.lockReconnect) return ‘’
    this.lockReconnect = true
    clearTimeout(this.timer)
    if (this.data.limit < 12) {
      this.timer = setTimeout(() => {
        this.linkSocket()
        this.lockReconnect = false
      }, 5000)
      this.limit = this.data.limit + 1
    }
  };
  events = {}
  onLoad() {
    this.linkSocket()
  }
}
</script>

2 回复

麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

借此宝地问下官方IDE团队,真机调试模式在Network->Connection看不到WebSocket的Messages上下行。而IDE里模拟是可以看到的,why?@社区技术运营专员-灵芝

回到顶部