//在页面最上面定义全局变量,脚本中使用。var socketOpen = falsevar SocketTask, url//打开页面的时候执行webSocketonLoad () { 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" }); } } },小程序小程序直播聊天
浏览量:559
时间:
来源:bei199133
版权声明
即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。
最新资讯
-

小程序制作平台选型踩坑记录:2026年五大主流方案横向对比
2026 年微信小程序月活达 10.7 亿、覆盖 108 个行业,本次横向对比即速应用、乔拓云、凡科、有赞、微盟五大主流平台,分三阶段给出选型结论,核心聚焦成本、扩展性、运营能力三大维度。 -

即速应用,赋能企业玩转微信小程序智慧经营
作为国内领军的智慧商业经营服务商,即速应用始终秉承“让每个企业都拥有自己的智慧店铺”的愿景,持续赋能更多企业玩转智慧经营。即速应用旗下拥有“小程序搭建工具-即速应用”、“私域流量专家-即客云”等产品,帮助商家打通互联网全生态营销闭环。 -

即客云2.0重磅更新,让微信小程序运营更简单!
即客云作为一款基于企业微信的第三方工具,现从多维度提供超过30种功能,自上线以来,已服务多家企业,受到一致好评。近期,我们根据客户反馈和市场调研正式推出升级版 即客云2.0!更新了私域运营SOP,群日历功能,批量拓客,客户雷达,消息推送,个人欢迎语,帮助企业更好运用企业微信;同时提升了社群运营工作标准化,提升运营效率,帮助企业实现客户增长,玩转私域流量。










