回答

小程序js代码

var sotk = null;

var socketOpen = false;

var wsbasePath = "ws://后端ip或域名:9504";





Page({





  //监听指令

  webSokcketMethods(e) {

    let that = this;

    sotk.onOpen(res => {

      socketOpen = true;

      console.log('监听 WebSocket 连接打开事件。', res);

      that.sendSocketMessage("hello");

    })

    sotk.onClose(onClose => {

      console.log('监听 WebSocket 连接关闭事件。', onClose)

      socketOpen = false;

    })

    sotk.onError(onError => {

      console.log('监听 WebSocket 错误。错误信息', onError)

      socketOpen = false

    })



    sotk.onMessage(onMessage => {

      var data = JSON.parse(onMessage.data);

      console.log('监听WebSocket接受到服务器的消息事件。服务器返回的消息', data);



    })



  },



  //发送消息

  sendSocketMessage(msg) {

    let that = this;

    if (socketOpen) {

      console.log('通过 WebSocket 连接发送数据', JSON.stringify(msg))

      sotk.send({

        data: JSON.stringify(msg)

      }, function (res) {

        console.log('已发送', res)

      })

    }



  },

  //关闭连接

  closeWebsocket(str) {

    if (socketOpen) {

      sotk.close({

        code: "1000",

        reason: str,

        success: function () {

          console.log("成功关闭websocket连接");

        }

      })

    }

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {







  },

  connect() {

    sotk = wx.connectSocket({

      url: wsbasePath,

      header: {

        'content-type': 'application/x-www-form-urlencoded'

      },

      method: "POST",

      success: res => {

        console.log('小程序连接成功：', res);

      },

      fail: err => {

        console.log('出现错误啦！！' + err);

        wx.showToast({

          title: '网络异常！',

        })

      }

    })



    this.webSokcketMethods();

  },



  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady: function () {



  },





  /**

   * 生命周期函数--监听页面显示

   */

  onShow: function () {

    this.connect();

   

  },



  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide: function () {

    this.closeWebsocket("bye")

    sotk = null;

    socketOpen = false;

  },



  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload: function () {

    this.closeWebsocket("bye")

    sotk = null;

    socketOpen = false;

  },



  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh: function () {



  },



  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom: function () {



  },



  /**

   * 用户点击右上角分享

   */

  onShareAppMessage: function () {



  }

})

那么后端我们使用php swoole来写一个，代码如下

<?php

$server=new Swoole\Websocket\Server("0.0.0.0", 9504);

$server->on('open', function($server, $req) {
    echo "connection open: {$req->fd}\n";
});

$server->on('message', function($server, $frame) {
    echo "received message: {$frame->data}\n";
    $server->push($frame->fd, json_encode(["hello", "world"]));
});

$server->on('close', function($server, $fd) {
    echo "connection close: {$fd}\n";
});

$server->start();

如果 使用wss，先去阿里或腾讯申请一个免费的证书，那么swoole的代码要改变下，

$server = new Swoole\Websocket\Server("0.0.0.0", 9504, SWOOLE_PROCESS, SWOOLE_SOCK_TCP | SWOOLE_SSL);
$server->set(array(
    'worker_num' => 1,
    'max_conn' => 65535,
    'ssl_cert_file' => '/cert/domian.com.pem',
    'ssl_key_file' => '/cert/domian.com.key',
    // 'daemonize' => true,
    'backlog' => 128,
));
// 'task_worker_num' => 1,

$server->on('open', function($server, $req) {
    echo "connection open: {$req->fd}\n";
});

$server->on('message', function($server, $frame) {
    echo "received message: {$frame->data}\n";
    $server->push($frame->fd, json_encode(["hello", "world"]));
});

$server->on('close', function($server, $fd) {
    echo "connection close: {$fd}\n";
});

$server->start();