如何在小程序中实现 WebSocket 通信 - 腾讯云开发者社区-腾讯云

sudo apt update
sudo apt install php php-fpm php-curl nginx composer -y

复制

cd /etc/nginx/conf.d
sudo nano weixin.techeek.cn.conf

复制

server {
        listen 443 ssl;
        server_name weixin.techeek.cn;
				index  index.php index.html index.htm;
				root /usr/share/nginx/html;
        ssl_certificate      /home/ubuntu/1_weixin.techeek.cn_bundle.crt;
        ssl_certificate_key  /home/ubuntu/2_weixin.techeek.cn.key;
        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;

        location ~ .php$ {
        fastcgi_pass  unix:/run/php/php7.0-fpm.sock;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include        fastcgi_params;
    }
        location /
        {
        proxy_pass http://127.0.0.1:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header X-Real-IP $remote_addr;
        }
}

server {
        listen 80 default_server;
        server_name weixin.techeek.cn;
        root /usr/share/nginx/html;
        index index.php index.html index.htm;
        location / {
                try_files $uri $uri/ =404;
        }
}

复制

sudo service nginx restart

复制

mkdir /home/ubuntu/php-websocket-server
cd /home/ubuntu/php-websocket-server

复制

sudo composer config -g repo.packagist composer https://packagist.phpcomposer.com
sudo composer update
sudo composer require workerman/workerman

复制

├── composer.json
├── composer.lock
└── vendor

复制

nano webSocket.php

复制

<?php
require_once __DIR__ . '/vendor/autoload.php';
use Workerman\Worker;
$ws_worker = new Worker("websocket://0.0.0.0:8080");
$ws_worker->count = 4;
$ws_worker->onMessage = function($connection, $data)
{
    $connection->send('hello ' . $data);
};
Worker::runAll();

复制

sudo php webSocket.php start

复制

Page({
onReady: function () {
	wx.connectSocket({
    url: 'wss://weixin.techeek.cn'
	})
},
})

复制

Page({
  onReady: function () {
    wx.connectSocket({
      url: 'wss://weixin.techeek.cn',
        success: function (res) {
          console.log("连接服务器成功")
      },
      fail: function (res) {
        console.log("连接服务器失败")
      }
    })
  },
})

复制

<view><text>连接服务器状态：{{status}}</text></view>

复制

Page({
  onReady: function () {
    var myThis = this;
    wx.connectSocket({
      url: 'wss://weixin.techeek.cn',
      success: function (res) {
        myThis.setData({
          status: "连接服务器成功"
        })
      },
      fail: function (res) {
        myThis.setData({
          status: "连接服务器失败"
        })
      }
    })
  },
})

复制

Page({
  onReady: function () {
    var myThis = this;
    wx.connectSocket({
      url: 'wss://weixin.techeek.cn'
    })
    wx.onSocketOpen(function (res) {
      myThis.setData({
        status: "websocket连接服务器成功"
      })
    })
  },
})

复制

Page({
    onReady: function () {
    var myThis = this;
    wx.connectSocket({
      url: 'wss://weixin.techeek.cn'
    })
    wx.onSocketOpen(function (res) {
      wx.sendSocketMessage({
        data: "你好",
        success: function (res) {
          console.log("数据已发给服务器")
        }
      })
      myThis.setData({
        status: "websocket连接服务器成功"
      })
    })
  },
})

复制

Page({
  onReady: function () {
    var myThis = this;
    wx.connectSocket({
      url: 'wss://weixin.techeek.cn'
    })
    wx.onSocketOpen(function (res) {
      wx.sendSocketMessage({
        data: "你好",
        success: function (res) {
          console.log("数据已发给服务器")
        }
      })
      myThis.setData({
        status: "websocket连接服务器成功"
      })
    })
  },
  onLoad: function (options) {
    var myThis = this;
    wx.onSocketMessage(function (res) {
      myThis.setData({
        message: res.data
      })
    })
  },
})

复制

<view><text>连接服务器状态：{{status}}</text></view>
<view><text>服务器消息：{{message}}</text></view>

复制

<button type="primary" bindtap="connect">连接webSocket服务器</button>
<button type="warn" bindtap="close">断开webSocket服务器</button>
<input placeholder="在这里输入你要发送的弹幕内容" bindblur="input"/>
<button bindtap="send">向webSocket服务器发送消息</button>
<view><text>连接服务器状态：{{status}}</text></view>
<view><text>服务器消息：{{message}}</text></view>

复制

Page({
  connect() {
    var myThis = this;
    wx.connectSocket({
      url: 'wss://weixin.techeek.cn'
    })
    wx.onSocketOpen(function (res) {
      myThis.setData({
        status:"websocket连接服务器成功"
      })
    })
  },
  close(){
    var myThis = this;
    wx.closeSocket()
    wx.onSocketClose(function (res) {
      myThis.setData({
        status: "websocket服务器已经断开"
      })
    })
  },
send(){
  var myThis = this;
  wx.sendSocketMessage({
    data: this.inputValue,
    success: function (res) {
      console.log("发送信息")
      wx.showToast({
        title: '已发送',
        icon: 'success',
        duration: 1000
      })
    },
    fail: function (res) {
      myThis.setData({
        status: "请连接服务器"
      })
    }
  })
},
  input: function (e) {
    this.inputValue = e.detail.value
  },
  onLoad: function (options) {
    var myThis = this;
    wx.onSocketMessage(function (res) {
      myThis.setData({
        message:res.data
      })
      wx.showToast({
        title: '你收到来自服务器的消息',
        icon: 'none',
        duration: 2000
      })
    })
  },
})

复制

<?php
require_once __DIR__ . '/vendor/autoload.php';
use Workerman\Worker;
use Workerman\Lib\Timer;

$worker = new Worker('websocket://0.0.0.0:8080');
$worker->onWorkerStart = function($worker){
    Timer::add(10, function()use($worker){
        foreach($worker->connections as $connection) {
            $connection->send('你好！');
        }
    });
};

$worker->onMessage = function($connection, $data)
{
    echo $data . "\n";
    $connection->send('服务器已经收到了你的消息');
};
Worker::runAll();

复制

sudo php webSocket.php start

复制