小程序与服务器通信webSocket和UDPSocket

UDPSocket 官方文档链接UDPSocket

webSocket 官方文档链接 WebSocket 任务

先用webSocket 测试成功后,由于WSS的问题最后决定用UDPSocket,两个都记录一下。

UDPSocket

项目里主要就使用了以下几个方法, 先用wx.createUDPSocket创建UDP Socket 实例,就能调用里面的方法(前提是都要在小程序后台配置域名,这里不说)。

onListening 监听开始监听数据包消息的事件,这里不知道有在什么地方(欢迎指教),不用也没啥影响 ==

由于只在一个页面上使用,就不封装了,几个关键的变量直接作为全局变量写在js前面。直接代码

javascript 复制代码
// js
var UDPSocket 
var port

Page({

  data: {
    show: false,
    MCUID:'',
    recyclingAmount:0,
  },
  onLoad(options) {
    // console.log(options.MCUID)
    this.setData({
      MCUID: options.MCUID,
    })
    this.createUDPSocket(true) 
  },
  onShow() {
    if(!UDPSocket){ this.createUDPSocket(true)}
    
  },
  //创建UDFSocket
  createUDPSocket(isStar){
    UDPSocket = wx.createUDPSocket()
    isStar = isStar?isStar:false
    //首次调用标志isStar
    if((!UDPSocket) && (!isStar)){
      wx.showModal({
        title: 'UDFSocket未创建',
        content: '重新连接',
        showCancel: true,
        complete: (res) => {
          if(res.confirm){
            this.createUDPSocket()
          }
        }
      })
      return
    }else if(!UDPSocket){return}
    // UDPSocket 创建后
    port = UDPSocket.bind(4561) //返回绑定成功的端口号
    //监听接收数据
    this.UDPonMessage()
    //发送心跳
    this.UDPheartbeat()
    //10秒发动一次心跳
    heartbeatTimer = setInterval(this.UDPheartbeat,10*1000)
  },
  //发送
  UDPsend(data){
    data = this.formatData(data)
    UDPSocket.send({
      address: '消息的地址',
      port: port,
      message: data,
    })
  },
  //心跳
  UDPheartbeat(){
    console.log("进来心跳")
    let data = {CommandType:0}
    this.UDPsend(data)
  },
  //监听接收信息
  UDPonMessage(){
    UDPSocket.onMessage((e) => {
      console.log('收到的信息------------------------',e)
      // message是收到的信息,类型是ArrayBuffer,要自己转换
      let message = this.ArrayBufferFunc(e.message)
      console.log("转换后的信息-------",message)
      //这里处理自己的逻辑
      if(message.CommandType == 1){
        this.setData({
          show: true,
          recyclingAmount: 1,
        })
      }
    })
  },
  // 开始回收
  startRecycling(){
    console.log('点击开始回收',UDPSocket,Boolean(UDPSocket))
    if(!UDPSocket){
      this.createUDPSocket()
      return
    }
    let data = {MCUID: this.data.MCUID,CommandType:1 }
    this.UDPsend(data)
  },
  //结束回收
  closeDialog(){
    this.setData({
      show: false,
      recyclingAmount: 0,
    })
  },
  //关闭连接
  UDPclose(){
    if(!UDPSocket){return}
    clearInterval(heartbeatTimer)
    UDPSocket.close()
    UDPSocket = null
    heartbeatTimer = null
  },
  //处理发送数据
  formatData(obj){
      let today = String(new Date().getFullYear()) + (new Date().getMonth()+ 1) + new Date().getDate() 
      let randomNumber = Math.floor(Math.random() * 100000)
      let RequestID = today + randomNumber
      obj.RequestID = RequestID
      obj.PlayerID = wx.getStorageSync('PlayerID')
      // console.log(RequestID,obj)
      let keysArr = Object.keys(obj).sort()
      let splicingStr = keysArr.reduce((splicingStr,key,index)=>{
        if(index == 0){
          splicingStr =  key + "=" + obj[key]
        }else {
          splicingStr = splicingStr + "&" + key + "=" + obj[key]
        }
        return splicingStr
      },'')
      splicingStr = splicingStr +  "&SecretKey=CD463959-6080-41B3-BE48-A8BB63DE866A"
      let SignKeyValue = md5.hex_md5(splicingStr)
      obj.SignKey = SignKeyValue
      // console.log(keysArr)
      // console.log(splicingStr)
      // console.log(obj)
      console.log("处理后的JSON数据",JSON.stringify(obj))
      return JSON.stringify(obj)
  },
  //ArrayBuffer处理
  ArrayBufferFunc(buffer){
    let str = String.fromCharCode.apply(null, new Uint8Array(buffer))
    return JSON.parse(str)
  },

  onHide(){
    console.log('onHide')
    this.UDPclose()
  },
  onUnload(){
    console.log('onUnload')
    this.UDPclose()
   
  },
 

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

  }
})

webSocket

官方推荐用SocketTask 来管理,上代码

javascript 复制代码
// pages/eggRecycle/eggRecycle.js
const md5 = require('../../utils/md5.js')
var SocketTask = null;
//心跳定时器
var heartbeatTimer = null; 

Page({

  data: {
    isTask: false,// 连接是否成功
    show: false,
    MCUID:'',
    recyclingAmount:0,
  },

  onLoad(options) {
    // console.log(options.MCUID)
    this.setData({
      MCUID: options.MCUID,
    })
  },
  onShow() {
    //创建连接
    this.connectSocket()
  },
  //心跳
  heartbeat(){
    console.log("进来心跳")
    let data = {
      CommandType:0,
    }
    this.send(data)
    heartbeatTimer = setInterval(()=>{
      this.send(data)
    },10*1000)
    
  },
  // 创建连接
  connectSocket() { 
    let isTask= false
    SocketTask =  wx.connectSocket({
        url: 'ws://124.222.224.186:8800', //网上的测试地址
        header: {
          'content-type': 'application/json'
        },
        success: (res => {
          console.log('创建连接成功', res)
          
        fail: (err => {
          console.log('创建连接失败',err)
          wx.showModal({
            title: '创建连接失败'+ err,
            content: '重新连接',
            showCancel: false,
            complete: (res) => {
                that.connectSocket()
            }
          })
        })
      })
      if(ifTask){
        that.setData({
            isTask:true,
        })
        this.onOpen()
        this.onMessage()
        this.onError()
        this.onClose()
      }
  },
  // 监听 WebSocket 连接打开事件
  onOpen() {
    SocketTask.onOpen((res) => {
      console.log('监听连接打开', res)
      //心跳
      this.heartbeat()
    })
  },
  //发送信息
  send(sendMessage) {
    let that = this
    SocketTask.send({
      data: this.formatData(sendMessage),
      success(res) {
      },
      fail(err) {

      }
    })
  },
  // 接收到服务器的消息事件
  onMessage() {
    SocketTask.onMessage((data) => {
      console.log('接受到的服务器信息', data)
    })
  },
  //监听 WebSocket 连接关闭事件
  onClose() {
    SocketTask.onClose((data)=>{
      console.log('监听连接关闭',data)
      SocketTask = null
    })
  },
  //关闭事件
  close(){
    if(!this.data.isTask){return}
    clearInterval(heartbeatTimer)
    SocketTask.close()
    heartbeatTimer = null
  },
  // 监听 WebSocket 错误事件
  onError(){
    SocketTask.onError((err)=>{
      console.log('监听 WebSocket 错误事件', err)
    })
  },

  //处理数据
  formatData(obj){
    // SecretKey=CD463959-6080-41B3-BE48-A8BB63DE866A
      let today = String(new Date().getFullYear()) + (new Date().getMonth()+ 1) + new Date().getDate() 
      let randomNumber = Math.floor(Math.random() * 100000)
      let RequestID = today + randomNumber
      obj.RequestID = RequestID
      obj.PlayerID = wx.getStorageSync('PlayerID')
      // console.log(RequestID,obj)
      let keysArr = Object.keys(obj).sort()
      let splicingStr = keysArr.reduce((splicingStr,key,index)=>{
        if(index == 0){
          splicingStr =  key + "=" + obj[key]
        }else {
          splicingStr = splicingStr + "&" + key + "=" + obj[key]
        }
        return splicingStr
      },'')
      splicingStr = splicingStr +  "&SecretKey=CD463959-6080-41B3-BE48-A8BB63DE866A"
      let SignKeyValue = md5.hex_md5(splicingStr)
      obj.SignKey = SignKeyValue
      // console.log(keysArr)
      // console.log(splicingStr)
      // console.log(obj)
      console.log("处理后的JSON数据",JSON.stringify(obj))
      return JSON.stringify(obj)
  },


  onHide(){
    console.log('onHide')
    this.close()
  },
  onUnload(){
    console.log('onUnload')
    this.close()
  },
  openDialog(){
    //启动回收
    let data = {MCUID: this.data.MCUID,CommandType:1 }
    console.log("发送启动")
    this.send(data)
    this.setData({
      show: true,
    })
  },
  //回收记录
  getRecord(){
    wx.navigateTo({
      url: '../orderRecord/orderRecord?active=3',
    })
  },



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

  }
})
相关推荐
weixin_lynhgworld2 小时前
剧本杀小程序系统开发:内容生态与商业模式的双轮驱动
大数据·小程序
计算机徐师兄2 小时前
Java基于SpringBoot的农场管理系统小程序【附源码、文档说明】
java·微信小程序·小程序·农场管理系统小程序·java农场管理系统小程序·java农场管理系统微信小程序·农场管理微信小程序
00后程序员张2 小时前
iOS混淆与IPA文件加固全流程实战 防止苹果应用被反编译的工程级方案
android·ios·小程序·https·uni-app·iphone·webview
云霄IT3 小时前
新版电脑微信4.1.x.x小程序逆向之——寻找小程序存放位置目录和__APP__.wxapkg
java·微信·小程序
wmsj05783 小时前
微信小程序上的图片怎么批量下载?附工具教程
小程序
鸭鸭梨吖3 小时前
微信小程序输入框---模糊搜索
微信小程序·小程序·notepad++
2501_915106324 小时前
iOS 应用加固与苹果软件混淆指南,如何防止 IPA 被反编译与二次打包?
android·ios·小程序·https·uni-app·iphone·webview
Stringzhua5 小时前
微信小程序快速入门【02】
微信小程序·小程序
赵庆明老师6 小时前
Uniapp微信小程序开发:全局变量的使用
微信小程序·小程序·uni-app
2501_915921437 小时前
iOS 应用加固与苹果软件混淆全解析 IPA 文件防反编译、混淆加密与无源码加固策略
android·macos·ios·小程序·uni-app·cocoa·iphone