小程序实现直播采坑

小程序对直播和websocket都进行了比较好的封装，通过live-player组件和websocketAPI即可实现直播互动功能。但是万恶的文档啊，单看过去还是一头雾水，这里我将自己实现直播的过程记录分享给大家！

最开始比较头疼的是websocket这块，小程序虽然有比较好的api提示，但是完全没有一个能拿的出手的demo，所以有种看了没看的感觉！后来找了一番度娘，才大致有一些基本思路。

在页面最上面定义全局变量，脚本中使用。

var socketOpen = false
var SocketTask, url

打开页面的时候执行webSocket

onLoad () {
    url = "wss://www.xlroader.com/wss/" + id
},
onShow () {
    if (!socketOpen) {
        this.webSocket()
    }
}
webSocket () {
    // 创建Socket
    SocketTask = wx.connectSocket({
        url: url,
        method: 'post',
        success: function(res) {
            console.log('WebSocket连接创建', res)
        }
    })
    // 监听Socket打开
    SocketTask.onOpen(res => {
        socketOpen = true
        console.log('监听 WebSocket 连接打开事件。', res)
    })
    // 监听Socket发送消息
    SocketTask.onMessage(res => {
        console.log('发送了一条消息')
        res.data = JSON.parse(res.data)
        console.log(res.data)
        res = res.data
        if (res.msgtype == "msgcontent" && res.actid == this.data.id) {
            //chatArr是聊天数据的数组，包含用户昵称和用户发送的文本信息
            this.data.chatArr.push({
                name: res.name,
                text: res.text
            })
            this.setData({
                chatArr: this.data.chatArr,
                //每次输入内容之后更改scrollTop的值，让它滑动到最底端
                scrollTop: this.data.chatArr.length * 100
            })
        }
    })
    // 监听Socket关闭
    SocketTask.onClose(res => {
        console.log('关闭 WebSocket 连接。')
        socketOpen = false
    })
}

websocket创建完毕之后，就可以愉快的发送消息了，代码如下:

// 发送消息
onInputTap(event) {
    let value = event.detail.value
    let name = app.globalData.userInfo.nickName
    let data = {
        name: name,
        text: value
    }
    // 如果webSocket创建
    if (socketOpen) {
        //  将发消息人的昵称和内容发送出去
        this.sendSocketMessage(data)
        this.data.chatArr.push({
            name: name,
            text: value
        })
        this.setData({
            scrollTop: this.data.chatArr.length * 100,
            inputValue: "",
            chatArr: this.data.chatArr
        })
    }
}，
// 发送数据
sendSocketMessage(msg) {
    msg.id = this.data.id,
    msg.memberid = app.globalData.memberid
    SocketTask.send({
        data: JSON.stringify(msg)
    }, (res) => {
        console.log(res)
    })
}

如果关闭页面或者关闭微信

// 页面关闭
onUnload() {
    SocketTask.close({
        reason: this.data.id
    })
},
// 页面卸载
onHide() {
    SocketTask.close({
        reason: this.data.id
    })
}

基本的聊天模块就以上代码，然后在使直播全屏化的过程中，又发现了一个小问题，那就是直播全屏之后不是铺满屏幕的，而只占了中间一小块，后来查了下，原来是需要设置画面的方向，官方提供了orientation这个属性，orientation: "horizontal"即可设置全屏，代码如下：

// 全屏
fullScreen() {
    let that = this
    let fullScreenFlag = that.data.fullScreenFlag
    if (fullScreenFlag) {
        fullScreenFlag = false
    } else {
        fullScreenFlag = true
    }
    if (fullScreenFlag) {
        //全屏
        that.PlayerCtx.requestFullScreen({
            success: res => {
                that.setData({
                    fullScreenFlag: fullScreenFlag,
                    liveDirection: "horizontal"
                });
            }
    } else {
        //缩小
        that.PlayerCtx.exitFullScreen({
            success: res => {
                that.setData({
                    fullScreenFlag: fullScreenFlag,
                    liveDirection: "vertical"
                });
            }
        }
    },

记在最后，当时好像都写完了才发现一个很严重的问题，直播跑不起来，大写的尴尬，后来发现好像是端口出错，貌似需要配置下端口代理啥的，时间有点久忘记了，小伙伴们遇到了不要慌张，也许就是这个错误哦！！！