人人商城 互动直播(小程序端)

在人人商城小程序的基础上新增互动直播功能的心路历程

人人商城,对我而言真是又爱又恨啊。对于简单的商城项目来说只要稍稍配置一下就可以直接交互了,可是如果是做二次开发的话就真的够恶心的🤣

最近开始做主播带货小程序,恰好人人商城内有互动直播的H5版的应用,所以需要在小程序端新增互动直播的功能。(不要问我为什么不买一个直播带货的小程序源码,因为我做不了决定啊😂)

小程序功能

  • 主播端,使用腾讯云直播,生成推流地址,进行直播

  • 用户端,生成播放地址,使用小程序的标签 live-player 进行直播观看

聊天功能(这是重点,记下,考试会考)

项目刚开始,我对 WebSocket 真的是一无所知。我就先阅读了一下原有的pc端和mobile端的代码,研究用户发送的信息是如何传播的,也百度,google了几乎所有的小程序WebSocket的案例,毫无进展的两天真的是让我甚是焦虑啊

  • 根据微信开发文档以及各种案例,写了一下连接

    /**
    * 生命周期函数--监听页面加载
    */
    onLoad: function (options) {
    // 连接
    wx.connectSocket({
      url: 'wss://xxx.xx:xxxx',// wss://域名:端口
      header: {
        'content-type': 'application/json'
      },
      success: function(res) {
        console.log('连接成功');
      }
    })
    
    wx.onSocketOpen(function (res) {
      var that = this;
      console.log('websocket已经打开')
    
      wx.c({
        data: 'Say hello to the world',
        success: function(res) {
          console.log('向服务端发送了一条信息')
        }
      })
    })
    
    // 实时监控信息
    wx.onSocketMessage(function (res) {
      console.log('此处接收信息')
      var nres = JSON.parse(res.data)
      console.log(nres)
    })
    
    wx.onSocketError(function (res) {
      console.log(res);
    })
    
    },

按照我的预计,运行此段代码,应该会得到类似于以下的结果:

连接成功
websocket已经打开
向服务端发送了一条信息
此处接收信息
xxx // 实时监控返回的数据

😋 做到这里,离成功已经近了一大步,心情大好

运行一波,结果差强人意啊,连接成功了,信息也已经发送成功,可是完全监控不到信息😭

又上网一顿乱查了一通,完全找不到方向,然后找了兄弟问了下,拿到了一个成功的H5案例,专研了一番,然后改了下 url ,运行了一下,GG

终于找到问题了, url 有问题

不过为什么会输出连接成功呢,而且web端是好的,然后我看了下 server.php

发现服务端接收的消息做了进一步的判断和筛选,幸好在筛选之前把写入了log里面

随后看了一下log,发现刚刚发送的消息其实是已经收到的了

可为什么会没有返回呢,再仔细看了下 server.php 的代码,以及web端的代码

发送的信息需要指定一些参数,没有这些参数,服务端就会过滤掉,不返回给客户端。(具体哪些参数就要看web端或这看服务端写入log时的具体参数)

加上一大串参数后,发现,还是没有返回数据

难道是我的发现错了,仔仔细细地再看了一次客户端的发送消息的过程

发送消息前少了登入操作,虽说只是同样是 sendSocketMessage 操作,不过改了一下其中的参数,反正现在也没啥方向就试试呗

于是在发送消息前加了登入操作,编译运行

顿时晴空万里,终于成功了😂,太恶心啦~

END

  • 要学会看代码
  • 要学会怀疑自己,要问自己为什么,这样更容易找到问题,问题往往错在最不被怀疑的地方(人只会被朋友背叛,敌人是永远不会有背叛和出卖的机会的!)
  • 要多做尝试,病急乱投医,说不准就对了呢,反正不会真的死,瞎折腾就对了