小程序UDP通信

作者: 甚时跃马归来 | 来源:发表于2019-06-02 19:24 被阅读1次

    前言

    UDP通信分为单播 广播 组播,基础库2.7.0之后,小程序开始支持UDP通信,目前小程序只支持单播。

    小程序API

    小程序UDP通信这一块可以说是很简单了就一个UDPSocket实例。然后bind()方法绑定端口,send()方法发送数据,close()方法关闭通信,onMessage()方法监听消息等等,具体可以去看文档

    相关技术难点

    使用UDP通信时,如果是用于局域网内数据传输,这里有个难点就是,不知道本机及对应要通信设备在当前局域网内的ip及绑定的端口。如果是用于和服务器之间的数据传输的话,没想出具体应用场景...

    通信效果展示

    由于没有2台手机,所以用node.js代码充当了其中一台客户端,先看看客户端间通信截图。


    client1.png
    client2.png

    Node.js端代码

    通过dgram框架进行操作,这里由于演示,所以每次都简单地返回相同的数据。

    const dgram = require('dgram');
    const server = dgram.createSocket('udp4');
    server.on('close',()=>{
        console.log('socket已关闭');
    });
    server.on('error',(err)=>{
        console.log(err);
    });
    server.on('listening',()=>{
        console.log('socket正在监听中...');
    });
    server.on('message',(msg,rinfo)=>{
        console.log(`receive message from ${rinfo.address}:${rinfo.port}`);
        console.log(`message=${msg}`)
        server.send('收到你的信息了',rinfo.port,rinfo.address)
    });
    server.bind('8060');
    

    小程序端代码

    代码比较简单,唯一需要注意的是,接收到udp消息时,数据是ArrayBuffter格式的,需要转成string显示。(这部分代码在js代码最下方)

    // js代码
    // pages/welcome/welcome.js
    let util = require('../../utils/util.js')
    Page({
     udpSocket:null,
     /**
      * 页面的初始数据
      */
     data: {
       messageList:[]
     },
     mydata:{
       message:'',
       remoteUrl: {
         ip: '',
         port: -1
       },
       isSend:false
     },
     addMessage(event){
       console.log(event)
       this.mydata.message = event.detail.value
     },
     sendMessage(){
       if (this.mydata.isSend){
         return ;
       }
       this.mydata.isSend = true
       let ip = this.mydata.remoteUrl.ip
       let port = this.mydata.remoteUrl.port
       let message = this.mydata.message
       if(message.trim() === ''){
         wx.showToast({
           title: '请输入内容',
         })
         return ;
       }
       udpSocket.send({
         address: ip,
         port: port,
         message: message
       })
       this.mydata.isSend = false
       let list = this.data.messageList
       let obj = {
         text: message,
         from : 2
       }
       list.push(obj)
       this.setData({
         messageList : list
       })
     },
     /**
      * 生命周期函数--监听页面加载
      */
     onLoad: function (options) {
       this.initUdpSocket()
     },
     initUdpSocket(){
       udpSocket = wx.createUDPSocket();
       if(udpSocket === null){
         console.log('暂不支持')
         return ;
       }
       const locationPort = udpSocket.bind()
       this.setData({
         'locationUrl.port': locationPort
       })
       udpSocket.onListening(function(res){
         console.log('监听中...')
         console.log(res)
       })
       let that = this
       udpSocket.onMessage(function (res) {
         console.log(res)
         let str = util.newAb2Str(res.message)
         console.log('str==='+str)
         let list = that.data.messageList
         let obj = {
           text: str,
           from: 1
         }
         list.push(obj)
         that.setData({
           messageList: list
         })
       })
     },
     /**
      * 输入ip/端口号
      */
     addIp: function(event){
       this.mydata.remoteUrl.ip = event.detail.value
     },
     addPort: function (event){
       this.mydata.remoteUrl.port = event.detail.value
     },
     /**
      * 生命周期函数--监听页面初次渲染完成
      */
     onReady: function () {
     },
     /**
      * 生命周期函数--监听页面显示
      */
     onShow: function () {
     }
    }
    
    // util.newAb2Str代码
    function newAb2Str(arrayBuffer){
     let unit8Arr = new Uint8Array(arrayBuffer);
     let encodedString = String.fromCharCode.apply(null, unit8Arr),
       decodedString = decodeURIComponent(escape((encodedString)));//没有这一步中文会乱码
     return decodedString;
    }
    
    

    相应的WXML和WXSS代码

    <!-- wxml -->
    <!--pages/welcome/welcome.wxml-->
    <view>
      <view class='header'>
        <view>
          <text>本机端口:{{locationUrl.port}}</text>
        </view>
        <view class='headerItem'>
            <text>IP地址:</text>
            <input type='text' bindinput='addIp'></input>
          </view>
        <view class='headerItem'>
          <text>端口:</text>
          <input type='number' bindinput='addPort'></input>
        </view>
      </view>
      <view class='content'>
          <block wx:for="{{messageList}}" wx:key="{{index}}">
            <view wx:if="{{item.from === 1}}" class='fromLeft'>
              <text>{{item.text}}</text>
            </view>
            <view wx:else class='fromRight'>
              <text>{{item.text}}</text>
            </view>
          </block>
      </view>
      <view class='footer'>
        <input type='text' bindinput='addMessage'></input>
        <button bindtap='sendMessage'>发送</button>
      </view>
    </view>
    
    
    // wxss
    /* pages/welcome/welcome.wxss */
    .header{
      padding: 20rpx;
      border-bottom: solid 1px #dfdfdf;
    }
    .headerItem{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      margin-top: 10rpx;
      height: 50rpx;
    }
    
    .headerItem > text{
      color: #333;
      width: 150rpx;
      font-size: 30rpx;
      text-align: right;
    }
    
    .headerItem  > input{
      border: solid 1px #dfdfdf;
    }
    .content{
      padding: 0 20rpx;
    }
    
    .content > view{
      margin-top: 10rpx;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }
    
    .content > .fromLeft > text{
      padding: 10rpx;
      width: 690rpx;
      text-align: left;
      background-color: orangered;
      color: white;
    }
    
    .content > .fromRight > text{
      padding: 10rpx;
      width: 690rpx;
      text-align: right;
      background-color: #dfdfdf;
      color: white;
    }
    
    .footer{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      padding: 0 20rpx;
      margin-top: 20rpx;
    }
    
    .footer > input{
      border: solid 2rpx #dfdfdf;
      border-radius: 4rpx;
      width: 500rpx;
      height: 70rpx;
      line-height: 70rpx;
      margin-right: 10rpx;
    }
    
    .footer > button{
      width: 200rpx;
      height: 70rpx;
      line-height: 70rpx;
    }
    

    相关文章

      网友评论

        本文标题:小程序UDP通信

        本文链接:https://www.haomeiwen.com/subject/xjxfxctx.html