欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

微信小程序 +nodejs+socket.io bug

发布：2018-01-25 12:03浏览： 次来源：网络 作者：tianshu

问题描述：技术
  • nodejs
  • socket.io
  • 微信小程序


     
源码
server.js
 
  1. const http = require('http').Server(app)
  2. const io = require('socket.io')(http)
  3.  
  4. app.use(function(req, res, next) {
  5.     res.setHeader('Access-Control-Allow-Origin', '*')
  6.     res.setHeader('Access-Control-Allow-Credentials', true)
  7.     res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS')
  8.     next()
  9. })
  10.  
  11. app.get('/', (req, res, next) => {
  12.   res.send({
  13.     code: 200,
  14.     message: 'Welcome to Chat'
  15.   })
  16. })
  17.  
  18. io.on('connection', socket => {
  19.   console.log('a user connected')
  20.  
  21.   socket
  22.     .broadcast
  23.     .emit('connection', '恭喜您, 您已经连接上了我们的聊天室了, 现在您可以开始聊天了')
  24.  
  25.   socket.on('disconnect', () => {
  26.     console.log('user disconnected')
  27.   })
  28.  
  29.   socket.on('chat message', msg => {
  30.     console.log(`message: ${msg}`)
  31.  
  32.     io.emit('chat message', msg)
  33.   })
  34. })
  35.  
  36. http.listen(3000, () => {
  37.   console.log('listening on *:3000')
  38.  
client.js
 
  1. onLoad(options) {
  2.    // 页面初始化 options为页面跳转所带来的参数
  3.  
  4.    // 创建一个 socket 连接
  5.    wx.connectSocket({
  6.      url: 'ws://localhost:3000',
  7.      data: {
  8.        x: '',
  9.        y: ''
  10.      },
  11.      header: {
  12.        'content-type': 'application/json'
  13.      },
  14.      method: 'GET',
  15.      success: function (res) {
  16.        console.log('connect success: ', res)
  17.      },
  18.      fail: function (err) {
  19.        console.log('connect error: ', err)
  20.      }
  21.    })
  22.  
  23.    // 监听websocket打开事件
  24.    wx.onSocketOpen(function (res) {
  25.      console.log('WebSocket连接已经打开!')
  26.  
  27.      socketOpen = true
  28.      for (var i = 0, len = socketMsgQueue.length; i < len; i++) {
  29.        sendSocketMessage(socketMsgQueue)
  30.      }
  31.  
  32.      // 关闭socket
  33.      wx.closeSocket()
  34.      // socketMsgQueue = []
  35.    })
  36.  
  37.    function sendSocketMessage(msg) {
  38.      if (socketOpen) {
  39.        wx.sendSocketMessage({data: msg})
  40.      } else {
  41.        socketMsgQueue.push(msg)
  42.      }
  43.    }
  44.  
  45.    // 监听WebSocket错误
  46.    wx
  47.      .onSocketError(function (res) {
  48.        console.log('WebSocket连接打开失败, 请检查!')
  49.      })
  50.  
  51.    // wx.sendSocketMessage 通过WebSocket连接发送数据, 需要先先 wx.connectSocket, 并在
  52.    // wx.onSocketOpen 回调之后才能发送 监听WebSocket 接收到拂去其的消息事件
  53.    wx.onSocketMessage(function (res) {
  54.      console.log('收到服务器内容: ' + res.data)
  55.    })
  56.  
  57.    // 关闭WebSocket连接 监听websocket连接
  58.    wx.onSocketClose(function (res) {
  59.      console.log('WebSocket 已关闭!')
  60.    })
 
BUG
  1. WebSocket connection to 'ws://localhost:3000/' failed: Connection closed before receiving a handshake response
  2.  
复制代码
为什么在握手前就断开连接了？
已知的问题是:
  • 微信小程序必须要 wss协议
  • 在客户端如果用 socket.io方式就可以，换成 html5的websocket 或 微信小程序内置的socket方式 都不行(socket.io使用的是http协议)。
想知道的是:
  • 微信小程序可以设置 socket以 http 协议请求吗?或者有什么有得解决方法?


参考解答：解答者：alicorn
微信小程序 websocket 协议版本为13 你可以抓包看下
而 socket.io 支持的协议版本为4 socket.io-protocol
ws支持协议版本13 可以用ws包或者以他为依赖的中间件ws





免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有