Swoole实践:7-使用Websocket上传文件(1)

小天天天天    PHP    999+ 次    2019-01-03 01:22:22


平时我们上传文件使用的是HTTP方式上传,今天我来给大家分享一下使用HTML5的websocket方式上传文件,后端使用Swoole的Websocket模块接收处理客户端上传的数据并保存为文件。本文实例是一个基础实例,后面我会专门给大家讲解更复杂更实战的文件上传实例。

服务端

我们继续使用Swoole实验室:1-使用Composer构建项目构建好的项目,新建文件\src\App\Uploader.php:

<?php 
namespace Helloweba\Swoole;

use swoole_websocket_server;

class Uploader
{
    protected $ws;
    protected $host = '0.0.0.0';
    protected $port = 9505;
    // 进程名称
    protected $taskName = 'swooleUploader';
    // PID路径
    protected $pidFile = '/run/swooleUploader.pid';
    // 设置运行时参数
    protected $options = [
        'worker_num' => 4, //worker进程数,一般设置为CPU数的1-4倍  
        'daemonize' => true, //启用守护进程
        'log_file' => '/data/log/swoole.log', //指定swoole错误日志文件
        'log_level' => 3, //日志级别 范围是0-5,0-DEBUG,1-TRACE,2-INFO,3-NOTICE,4-WARNING,5-ERROR
        'dispatch_mode' => 1, //数据包分发策略,1-轮询模式
    ];
 

    public function __construct($options = [])
    {
        $this->ws = new swoole_websocket_server($this->host, $this->port);

        if (!empty($options)) {
            $this->options = array_merge($this->options, $options);
        }
        $this->ws->set($this->options);

        $this->ws->on("open", [$this, 'onOpen']);
        $this->ws->on("message", [$this, 'onMessage']);
        $this->ws->on("close", [$this, 'onClose']);
    }

    public function start()
    {
        // Run worker
        $this->ws->start();
    }

    public function onOpen(swoole_websocket_server $ws, $request)
    {
        // 设置进程名
        cli_set_process_title($this->taskName);
        //记录进程id,脚本实现自动重启
        $pid = "{$ws->master_pid}\n{$ws->manager_pid}";
        file_put_contents($this->pidFile, $pid);

        echo "server: handshake success with fd{$request->fd}\n";
        $msg = '{"msg": "connect ok"}';
        $ws->push($request->fd, $msg);
    }

    public function onMessage(swoole_websocket_server $ws, $frame)
    {
        $opcode = $frame->opcode;
        if ($opcode == 0x08) {
            echo "Close frame received: Code {$frame->code} Reason {$frame->reason}\n";
        } else if ($opcode == 0x1) {
            echo "Text string\n";
        } else if ($opcode == 0x2) {
            echo "Binary data\n"; //
        } else {
            echo "Message received: {$frame->data}\n";
        }
        $filename = './files/aaa.jpg';
        file_put_contents($filename, $frame->data);
        echo "file path : {$filename}\n";
        $ws->push($frame->fd, 'upload success');
    }
    public function onClose($ws, $fid)
    {
        echo "client {$fid} closed\n";
        foreach ($ws->connections as $fd) {
            $ws->push($fd, $fid. '已断开!');
        }
    }
}

$frame->opcode,WebSocket的OpCode类型,可以通过它来判断传输的数据是文本内容还是二进制数据。

新建public/uploadServer.php,用于启动服务端脚本:

<?php 
require dirname(__DIR__) . '/vendor/autoload.php';

use Helloweba\Swoole\Uploader;

$opt = [
    'daemonize' => false
];
$ws = new Uploader($opt);
$ws->start();

客户端

在本地站点建立客户端文件upload.html。只需在页面中放置一个文件选择控件和一个用于输出上传信息的div#log。

<input type="file" id="myFile">
<div id="log"></div>

当选择好本地文件后,触发onchange事件,这个时候客户端尝试与服务端建立websocket连接,然后开始读取本地文件,读取完成后将数据发送给服务端。

$('#myFile').on('change', function(event) {
    var ws = new WebSocket("ws://192.168.1.31:9505");

    ws.onopen = function() {
        log('已连接上!');
    }
    ws.onmessage = function(e) {
        log("收到服务器消息:" + e.data + "'\n");
        if (e.data == 'connect ok') {
            log('开始上传文件');
        } 
        if (e.data == 'upload success') {
            log('上传完成');
            ws.close();
        } else {
            var file = document.getElementById("myFile").files[0];

            var reader = new FileReader();
            reader.readAsArrayBuffer(file);

            reader.onload = function(e) {
                ws.send(e.target.result);
                log('正在上传数据...');
            }
        }
    }
    ws.onclose = function() {
        console.log('连接已关闭!');
        log('连接已关闭!');
    }
});
//在消息框中打印内容
function log(text) {
    $("#log").append(text+"<br/>");
}

这里讲一下HTML5的FileReader 对象,FileReader允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。FileReader提供了几种读取文件的方法:

reader.readAsArrayBuffer(file|blob):用于启动读取指定的 Blob 或 File 内容。读取文件后,会在内存中创建一个ArrayBuffer对象(二进制缓冲区),将二进制数据存放在其中。当读取操作完成时,readyState 变成 DONE(已完成),并触发 loadend 事件,同时 result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据。通过此方式,可以直接在网络中传输二进制内容。此外对于大文件我们可以分段读取二进制内容上传。

reader.readAsDataURL(file|blob):该方法会读取指定的 Blob 或 File 对象。读取操作完成的时候,readyState 会变成已完成(DONE),并触发 loadend 事件,同时 result 属性将包含一个data:URL格式的字符串(base64编码)以表示所读取文件的内容。

FileReader.readAsText(file|blob):可以将 Blob 或者 File 对象转根据特殊的编码格式转化为内容(字符串形式)。当转化完成后, readyState 这个参数就会转换 为 done 即完成态, event("loadend") 挂载的事件会被触发,并可以通过事件返回的形参得到中的 FileReader.result 属性得到转化后的结果。

FileReader.readAsBinaryString():读取文件内容为二进制字符串,已废除,不要用了。

实验

运行服务端

php uploadServer.php

运行客户端

在本地站点目录,打开upload.html。选择图片上传,即刻显示如下信息:

ws-upload.jpg

查看服务端输出:

ws-upload2.jpg

这时候检查服务器上对应目录下会出现一个aaa.jpg的文件。

Swoole也提供了Websocket客户端,可以使用websocket在不同服务端传输文件。

我们会发现使用Websocket确实把文件上传成功,但是实验中并没有考虑大文件的上传,加入有一个很大的日志文件或者视频文件需要上传到服务器上,那就需要采取分片上传,并考虑断点上传的问题,在下一节文章实验中,我们将具体探讨使用Websocket上传大文件,敬请关注。


如果你觉得本篇文章对您有帮助,请打赏作者

上一篇: 使用Guzzle执行HTTP请求

下一篇: 漂亮的动态气泡背景效果bubbly-bg.js

最新评论

是他是他就是他 回复:非常赞的文章![em_63]

2019-02-10 22:45:02 回复


小天天天天 回复 是他是他就是他 :[em_49]

2019-02-19 09:49:05 回复


热门文章

最新评论

网站数据

网站文章数:483

今日UV/PV/IP:1/1/1

昨日UV/PV/IP:25/31 /25

TOP