uniapp vue3 微信小程序 项目中使用 websocet、微信小程序真机调试 websocket 报错 errMsg: “Invalid HTTP status.“

uniapp vue3 微信小程序 项目中使用 websocet

const websocketParams = ref({
  accessToken: 'token'
})

const websoketFn = () => {
  uni.connectSocket({
    url: `wss://www.xxx.com:1688/coord/messenger/websocket/site`, //演示接口
    success: (res) => {
      console.log("正准备建立websocket中...", res)
    },
  })
  uni.onSocketOpen(function (res) {

    socketOpen.value = true
    sendSocketMessage()
    console.log('WebSocket连接已打开！', res)
  })
  uni.onSocketError(function (res) {
    console.log('WebSocket连接打开失败，请检查！', res)
  })

  // 建立连接后发送数据
  function sendSocketMessage() {
  //需要在确定建立连接后才能发送数据
    if (socketOpen.value)
      uni.sendSocketMessage({
        data: JSON.stringify(websocketParams.value)
      })
  }

  uni.onSocketMessage(function (res) {
    console.log('收到服务器内容：', res)
    getMessageNumber()
  })
}

• uniapp-websocket官方文档
• 注意点：需要在确定建立连接后才能去发送数据

微信小程序真机调试 websocket 报错 errMsg: “Invalid HTTP status.”

• 这个错误通常是因为小程序 WebSocket 请求的地址没有配置为 HTTPS，而是使用了 HTTP，因此需要注意以下几点：
  • 小程序开发者工具可以支持使用 ws:// 前缀的 WebSocket 地址，但在真机上会因为不安全的原因而无法使用。因此，需要使用 wss:// 前缀的 WebSocket 地址来进行真机调试。
  • 在真机调试时，需要将服务器地址配置为 HTTPS 地址，否则会出现连接失败并报错 Invalid HTTP status.。需要注意的是，如果服务器本身不支持 HTTPS，则需要使用自己搭建的反向代理服务器来进行请求转发。
  • 另外，需要在小程序的开发设置里勾选“不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书”这个选项。这个选项只在开发和测试阶段使用，正式发布时需要将其取消勾选。
  • 综上所述，要在微信小程序真机调试中使用 WebSocket，需要将地址配置为 wss:// 前缀的 HTTPS WebSocket 地址，并且需要选择“不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证”选项进行发和测试。
  • wss://www.xxx.com:1688/coord/messenger/websocket/site 使用前缀 wss

bye)🤡