微信小程序简单的swoole客服功能

小程序页面效果

<view>
  <view class="sendmessage">
    <input id="message" bindblur="inputMessage" placeholder="请输入聊天内容"></input>
    <button bindtap="sendMessage">发送</button>
  </view>
</view>

<view>
  <scroll-view scroll-y="true" class="history">
    <view class="service">{{message.name}}说：{{message.msg}} </view>
    <view>{{ unReadSpotNum }}</view>
  </scroll-view>
</view>

js代码

let socketOpen = false
Page({

  /**
   * 页面的初始数据
   */
  data: {
    content:""
  },
  messages(msg) {
    if (socketOpen) {
      console.log(msg)
      wx.sendSocketMessage({
        data:msg
      })
    }
  },
  inputMessage(e){
    this.setData({
      content:e.detail.value
    })
  },
  sendMessage:function(){
    this.messages(this.data.content)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.connectSocket({
      url: 'ws://110.40.180.66:7010'
    })
    wx.onSocketOpen(function(res) {
      socketOpen = true
    })
    wx.onSocketMessage(function (res) {
      console.log(res)
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

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

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})