微信小程序+wx.connectSocket客服问答

该项目利用WebSocket进行实时通信,后端逐个返回数据直到--finish--结束。会话自动回滚到聊天底部,使用wx.createSelectorQuery获取节点信息。通过wx.setStorageSync实现会话缓存。代码示例展示了消息显示、输入框管理和滚动逻辑。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

项目需求,记录一下:

1.要求websocket实时返回会话结果

我项目这边是后端一次返回一个字,–finish–结束,所以实现方法是每获取到数据时就setData一次,直到获取到的数据为finish,停止setData
后端返回结果如图
在这里插入图片描述

2.会话自动回滚到底部

wx.createSelectorQuery()获取页面上的节点信息,可获得相对于显示区域的上下左右边界坐标,详情可点开链接查看
注意:每次发出问题,或者接受结果时都要重新计算节点信息

3.会话缓存(我这里用到的是wx.setStorageSync()

在这里插入图片描述
话不多说,上代码
wxml

<view >
<!-- isHe是为了首次进入页面时,要不要计算节点信息,如果没有缓存默认高度撑起来;有缓存,计算页面节点信息,获取滚动高度 -->
<view id="idView" style="height:{{isHe?'90vh':'auto'}};padding-bottom: 15vh;overflow: scroll;">
  <block wx:key wx:for='{{msgList}}' wx:for-index="index">
    <!-- 单个消息1 客服发出(左) -->
    <view wx:if='{{item.speaker=="server"}}' class="servers" id='msg-{{index}}' style='display: flex; padding: 2vw 11vw 2vw 2vw;'>
      <view style='width: 11vw; height: 11vw;'>
        <!-- 机器人图片 -->
        <image style='width: 11vw; height: 11vw; border-radius: 10rpx;' src='../../../assets/images/member/robot.png'></image>
      </view>
      <view style='width: 4vw; height: 11vw; margin-left: 0.5vw; display: flex; align-items: center; z-index: 9;'>
        <image style='width: 4vw;' src='../../../assets/images/member/left.png' mode='widthFix'></image>
      </view>
      <block>
        <!-- 发出消息等待返回结果时,三点加载动画 -->
        <view wx:if="{{isDisable && item.content==''}}" user-select='{{true}}' class='leftMsg loadView' space="nbsp" decode="{{true}}">
          <view class="dot1"> </view>
          <view class="dot2"></view>
          <view class="dot3"></view>
        </view>
        <text user-select='{{true}}' class='leftMsg' space="nbsp" decode="{{true}}">{{item.content}}</text>
      </block>
    </view>

    <!-- 单个消息2 用户发出(右) -->
    <view wx:else id='msg-{{index}}' style='display: flex; justify-content: flex-end; padding: 2vw 2vw 2vw 11vw;'>
      <view class='rightMsg'>{{item.content}}</view>
      <view style='width: 4vw; height: 11vw; margin-right: 0.5vw; display: flex; align-items: center; z-index: 9;'>
      	<!-- 左右箭头,见下图 -->
        <image style='width: 4vw;' src='../../../assets/images/member/right.png' mode='widthFix'></image>
      </view>
      <view style='width: 11vw; height: 11vw;'>
        <image style='width: 11vw; height: 11vw; border-radius: 10rpx;' src='{{cusHeadIcon}}'></image>
      </view>
    </view>
  </block>
</view>

<view class='inputRoom'>
  <input data-value="{{inputVal}}" disabled='{{isDisable}}' data-type="1" type="text" placeholder="请输入你的问题" confirm-type="send" bindconfirm='sendClick' value='{{inputVal}}' bindinput="ontext"></input>
  <image wx:if="{{!isDisable}}" data-type="2" bindtap='sendClick' class="sendIcon" src='../../../assets/images/member/send.png' mode='widthFix'></image>
  <image wx:else class="sendIcon" src='../../../assets/images/member/send.png' mode='widthFix'></image>
</view>
</view>


在这里插入图片描述
用到的api
wx.connectSocket()创建websocket连接
wx.onSocketOpen()监听websocket连接打开事件
wx.sendSocketMessage()发送数据,需要先 wx.connectSocket,并在 wx.onSocketOpen 回调之后才能发送
wx.onSocketMessage()监听websocket接收到服务器的消息事件
wx.createSelectorQuery()获取节点信息,如节点位置,文本内容等
wx.pageScrollTo()将页面滚动到目标位置,支持选择器和滚动距离两种方式定位
wx.closeSocket()关闭websocket连接
wx.onSocketClose()监听websocket连接关闭事件
js

const commonMixin = require('../../../utils/commonMixin')

const app = getApp();
var inputVal = '';
var msgList = [];
var windowWidth = wx.getSystemInfoSync().windowWidth;
var windowHeight = wx.getSystemInfoSync().windowHeight;
var keyHeight = 0;

let socketOpen = false;
let socketMsgQueue = [];
/**
 * 初始化数据
 */
function initData(that) {
  inputVal = '';
  msgList = [{
    speaker: 'server',
    contentType: 'text',
    content: '你好,我是人工智能助手,请问有什么可以帮你?'
  }, ]
  that.setData({
    msgList,
    inputVal
  })
}

function sendSocketMessage(msg) {
  console.log(socketOpen,'socketOpen',msg);
  if (socketOpen) {
    wx.sendSocketMessage({
      data: msg
    })
  } else {
    socketMsgQueue.push(msg)
  }
}



Page(Object.assign({
  /**
   * 页面的初始数据
   */
  data: {
    scrollTop: 0,
    isHe: false,
    text:'',
    isDisable:false,  // 发送消息等待回话时,input框禁用
    inputBottom: 0
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    initData(this);
    this.setData({
      cusHeadIcon: app.globalData.userInfo.avatar || app.globalData.userInfo.avatarUrl,
    });
  },



  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    let that = this;
    let list =wx.getStorageSync('memberList')
    console.log(list,'list');
    // 判断是否有缓存,有缓存时,计算页面节点信息,设置滚动距离
    if (list?.length>0) { // 有缓存
      that.setData({
        msgList:JSON.parse(list)
      })
      wx.createSelectorQuery().select('#idView').boundingClientRect(function (rect) {
        // 使页面滚动到底部
        wx.pageScrollTo({
          scrollTop: rect.height+rect.bottom   // 滚动距离
        })
        that.setData({
          scrollTop: rect.height+rect.bottom,
          isHe: false
        });
      }).exec()
    }else{  //没有缓存,默认高度是90vh
      wx.setStorageSync('memberList', JSON.stringify(this.data.msgList))
      that.setData({
        isHe: true,
      })
    }
   
    wx.connectSocket({
      url: 'wss://' + 连接地址 
      success(){
        console.log('连接成功')
      }
    })

    wx.onSocketOpen((res) => {
      socketOpen = true
      console.log("打开socket");
      socketMsgQueue = []
      wx.onSocketMessage((result) => {
        result.data = result.data.replace(" ", "&nbsp;");
        var str = result.data.indexOf("--finish--") != -1  // 判断返回的数据中是否包含‘--finish--’
        wx.createSelectorQuery().select('#idView').boundingClientRect(function (rect) {
        	// 使页面滚动到底部
        	wx.pageScrollTo({
           		scrollTop: rect.height+rect.bottom
        	})
        	that.setData({
           		scrollTop: rect.height+rect.bottom,
        	 	isHe: false
           	});
        }).exec()
        
        if (!!result.data) {
          result.data=str?result.data.replace('--finish--',''):result.data
          console.log(that.data.msgList,'-');
          that.data.msgList[that.data.msgList.length - 1].content = that.data.msgList[that.data.msgList.length - 1].content + result.data
          that.setData({
              msgList:that.data.msgList
            })
          if (str) {
          	// 包含‘finish’结束字符,将返回结果存入缓存 
            let list =wx.getStorageSync('memberList')?JSON.parse(wx.getStorageSync('memberList')):[]
            list.push({
              speaker: 'server',
              contentType: 'text',
              content: that.data.msgList[that.data.msgList.length - 1].content
            })
            wx.setStorageSync('memberList',JSON.stringify(list))
          }
        }
        
        if(str){
          that.setData({
            isDisable:false,
          })
        }
        
      })
    })
  },
  onHide: function () {
    console.log('onhide');
    wx.closeSocket()
    wx.onSocketClose((result) => {
      console.log("socket关闭成功");
      wx.showToast({
        icon: 'none',
        title: '会话关闭成功',
        duration: 500
      })
    })
  },
  onUnload:function(){
    console.log('onUnload',);
    wx.closeSocket()
    wx.onSocketClose((result) => {
      console.log("socket关闭成功");
    })
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  ontext:function(e){
    this.setData({
      text:e.detail.value
    })
  },
  sendClick:function(e){ 
   	// 发送问题计算页面信息,滚动距离
    let that = this
    wx.createSelectorQuery().select('#idView').boundingClientRect(function (rect) {
      // 使页面滚动到底部
      wx.pageScrollTo({
        scrollTop: rect.height+rect.bottom
      })
      that.setData({
        height: 'auto',
        scrollTop: rect.height+rect.bottom
      });
    }).exec()
    that.setData({
      isDisable:true
    })
    sendSocketMessage(that.data.text)  //发送问题
    msgList.push({
      speaker: 'customer',
      contentType: 'text',
      content: that.data.text
    })
    let list =wx.getStorageSync('memberList')?JSON.parse(wx.getStorageSync('memberList')):[]
    list.push({
      speaker: 'customer',
      contentType: 'text',
      content: that.data.text
    })
    // 将发送的问题存入缓存
    wx.setStorageSync('memberList', JSON.stringify(list))
    msgList.push({
      speaker: 'server',
      contentType: 'text',
      content: ''
    })
    inputVal = '';
    // 这里list.push一个空内容,是为了让三个点加载出现,相当于一个占位符
    list.push({
      speaker: 'server',
      contentType: 'text',
      content: ''
    })
    that.setData({
      msgList:list,
      text:'',
      inputVal
    });
  }
}, commonMixin))

wxss

page {
    background-color: #f1f1f1;
  }
.inputRoom{
  height: 10vh;
  display: flex;
  align-items: center;
  z-index: 999;
  background: #f1f1f1;
  position: fixed;
  bottom: 0;
  width: 100%;
}
  
  input {
    width: 76vw;
    height: 9.33vw;
    background-color: #fff;
    border-radius: 40rpx;
    margin-left: 2vw;
    padding: 0 3vw;
    font-size: 28rpx;
    color: #444;
  }
  
  .leftMsg {
    font-size: 35rpx;
    color: #444;
    line-height: 7vw;
    padding: 2vw 2.5vw;
    background-color: #fff;
    margin-left: -1.6vw;
    border-radius: 10rpx;
    z-index: 10;
    word-break: break-all;
  }
  
  .rightMsg {
    font-size: 35rpx;
    color: #444;
    line-height: 7vw;
    padding: 2vw 2.5vw;
    background-color: #96EB6A;
    margin-right: -1.6vw;
    border-radius: 10rpx;
    z-index: 10;
  }
  input{
    height: 12vw !important;
    margin-bottom: 3vh;
  }
  .servers:nth-last-of-type(2){
    margin-bottom: 5vw;
  }
  .servers:nth-last-of-type(2)>.leftMsg{
    padding-bottom: 5vw;
  }
  .sendIcon{
    width: 7vw;
    margin-left: 3.2vw;
    margin-bottom: 3vh
  }
  .loadView{
    display: flex;
    padding-top: 4vw;
  }
  .dot1, .dot2, .dot3 {
    background: #fff;
    width: 10rpx;
    height: 10rpx;
    border-radius: 50%;
    margin: 10rpx;
}

.dot1 {
    animation: jump 1.6s -0.32s linear infinite;
    background: #ccc;
}
.dot2 {
    animation: jump 1.6s -0.16s linear infinite;
    background: #ccc;
}
.dot3 {
    animation: jump 1.6s linear infinite;
    background: #ccc;
}

@keyframes jump {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    } 40% {
          -webkit-transform: scale(2.0);
          transform: scale(2.0);
      }
}

至此就结束啦!有不足之处欢迎指出~

为什么需要websocket? 传统的实时交互的游戏,或服务器主动发送消息的行为(如推送服务),如果想做在微信上,可能你会使用轮询的方式进行,不过这太消耗资源,大量的请求也加重了服务器的负担,而且延迟问题比较严重。如果是自己开发的app,为了解决这些问题,很多团队会自建socket,使用tcp长链接、自定协议的方式与服务器进行相对实时的数据交互。有能力的团队,采用这种方式自然没什么大问题。不过小团队可能就要花费很多时间去调试,要解决很多难题,这个在成本上就划不来。 H5引入了webSocket来解决网页端的长链接问题,而微信小程序也支持websocket。这是一个非常重要的特性,所以本系列的文章会专门拿出一篇来讨论websocketwebSocket本质上也是TCP连接,它提供全双工的数据传输。一方面可以避免轮询带来的连接频繁建立与断开的性能损耗,另一方面数据可以是比较实时的进行双向传输(因为是长链接),而且WebSocket允许跨域通信(这里有个潜在的跨域安全的问题,得靠服务端来解决)。目前除IE外的浏览器已经对webSocket支持得很好了,微信小程序再推一把之后,它会变得更加流行。 我们来设计一个新的demo,一个比较有趣的小游戏,多人版扫雷,准确地讲,多人版挖黄金。 游戏规则是这样的:把雷换成金子,挖到金子加一分,每人轮流一次(A挖完轮到B,B挖完A才能再点击),点中金子就算你的,也不会炸,游戏继续,直到把场上所有的金子都挖完游戏才结束。跟扫雷一样,数字也是表示周边有几个金子,然后用户根据场上已经翻出来的数字来猜哪一格可能有金子。 这种交互的游戏难点在于,用户的点击操作都要传到服务器上,而且服务器要实时的推送到其它玩家的应用上。另外用户自己也要接收对方操作时实时传过来的数据,这样才不至于重复点中同一个格子。简单讲,就是你要上报操作给服务器,而服务器也要实时给你推消息。为了简化整个模型,我们规定玩家必须轮流来点击,玩家A点完后,才能轮到玩家B,玩家B操作完,玩家A才能点。 我们分几步来实现这个功能。 一、实现思路 1、第一步,我们要先生成扫雷的地图场景 这个算法比较简单,简述一下。随机取某行某列就可以定位一个格子,标记成金子(-1表示金子)。mimeCnt表示要生成的金子的数量,用同样的方式循环标记mimeCnt个随机格子。生成完后,再用一个循环去扫描这些-1的格子,把它周边的格子都加1,当然必须是非金子的格子才加1。代码放在这里。 其中increaseArround用来把这格金子周边的格子都加1,实现也比较简单: 执行genMimeArr(),随机生成结果如下: -1表示金子。看了下貌似没什么问题。接下去,我们就要接入webSocket了。 (这个是js版本的,其实生成地图场景的工作是在后台生成,这个js版本只是一个演示,不过算法是一样的。) 2、我们需要一个支持webSocket的服务端 本例子中,我们使用python的tornado框架来实现(tornado提供了tornado.websocket模块)。当然读者也可以使用socket.io,专为webSocket设计的js语言的服务端,用起来非常简单,它也对不支持webSocket的浏览器提供了兼容(flash或comet实现)。 笔者本人比较喜欢使用tornado,做了几年后台开发,使用最多的框架之一的就是它,NIO模型,而且非常轻量级,同样的rps,java可能需要700-800M的内存,tornado只要30-40M,所以在一台4G内存的机子上可以跑上百个tornado服务,而java,对不起,只能跑3个虚拟机。微服务的时代,这一点对小公司很重要。当然如果读者本人对java比较熟悉的话,也可以选择netty框架尝试一下。 webSocket用tornado的另一个好处是,它可以在同一个服务(端口)上同时支持webSocket及http两种协议。tornado的官方demo代码中展示了怎么实现同时使用两种协议。在本游戏中,可以这么用:用户进入首页,用http协议去拉取当前的房间号及数据。因为首页是打开最多的,进了首页的用户不一定会玩游戏。所以首页还没必要建立webSocket链接,webSocket链接主要用来解决频繁请求及推送的操作。首页只有一个请求操作。选了房间号后,进去下一个游戏页面再开始建立webSocket链接。 3、客户端 使用微信小程序开发工具,直接连接是会报域名安全错误的,因为工具内部做了限制,对安全域名才会允许连接。所以同样的,这里我们也继续改下工具的源码,把相关的行改掉就行修改方式如下: 找到asdebug.js的这一行,把它改成: if(false)即可。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值