Problem beim Hochladen von PHP-Websocket-Bildern-PHP-Tutorial-php.cn

Problem beim Hochladen von PHP-Websocket-Bildern

WBOY

Freigeben： 2016-08-04 09:21:24

Original

1693 Leute haben es durchsucht

Jetzt lade ich Bilder per Websocket hoch und habe folgende Punkte gelernt:
1 Überwachung: Zuerst muss ein Prozess angehalten werden, um auf Anfragen des Kunden zu lauschen
2 Handshake: Für den ersten rechtlichen Schritt Anfrage, senden Sie den legalen Header zurück
3 Bleiben Sie in Verbindung: Senden Sie, wenn neue Nachrichten eingehen. Bis der Client die Verbindung trennt
4 Akzeptieren Sie eine weitere Anfrage und wiederholen Sie 2 und 3
Aber ich bin immer noch verwirrt über das Hochladen von Dateien. Bitte geben Sie mir eine bessere Verständnismethode.

Antwortinhalt:

Jetzt lade ich Bilder per Websocket hoch und habe folgende Punkte gelernt:
1 Überwachung: Zuerst muss ein Prozess angehalten werden, um auf Anfragen des Kunden zu lauschen
2 Handshake: Für den ersten rechtlichen Schritt Anfrage, senden Sie den legalen Header zurück
3 Bleiben Sie in Verbindung: Senden Sie, wenn neue Nachrichten eingehen. Bis der Client die Verbindung trennt
4. Akzeptieren Sie eine weitere Anfrage und wiederholen Sie 2 und 3
Aber ich bin immer noch verwirrt über das Hochladen von Dateien. Bitte geben Sie mir eine bessere Verständnismethode.

Veröffentlichen Sie Ihre eigene Lösung als Referenz. Ich hoffe, Sie können mir einige Hinweise geben.
Ich verwende den PHP-Swoole-Framework-Link http://www.swoole.com/ und HTML5 WebSocket
Den PHP-Teil von Dome
server.php Ich verwende das Swoole-Framework-Stammverzeichnis/examples/websocket/server.php zum Bearbeiten
Der wichtigste $server->onMessage-Teil des Codes

<code>$server->on('message', function (swoole_websocket_server $_server, $frame) {
    $update_path = 'uploads/';   
    $data = json_decode($frame->data, 1);
    $exe = str_replace('/', '.', strstr(strstr($data['data'], ';', TRUE), '/'));
    $exe = $exe == '.jpeg' ? '.jpg' : $exe;
    $tmp = base64_decode(substr(strstr($data['data'], ','), 1));
    $path = $update_path . md5(rand(1000, 999)) . $exe;
    file_put_contents($path, $tmp);
    echo "image path : {$path}\n";
});</code>

Nach dem Login kopieren

Gibt einen hochgeladenen Bildpfad zurück
HTML-Teil websocket.html

<code><!DOCTYPE html>
<html>
    <head>
        <title>WebSocket Chat Client</title>
        <meta charset="utf-8" />
        <script type="text/javascript" src="tmp/jquery/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" >
            //判读浏览器是否支持websocket
            $().ready(function () {
                if (!window.WebSocket) {
                    alert("你的浏览器不支持该功能啊");
                }
            });
            //在消息框中打印内容
            function log(text) {
                $("#msg_paler").append("<li style='width:1120px;word-wrap:break-word;'>" + text + "</li>");
            }
            //请求的IP地址
            var wsServer = 'ws://192.168.0.123:9501/swoole/examples/websocket';
            var websocket = new WebSocket(wsServer);
            //连接成功建立后响应
            websocket.onopen = function (evt) {
                log("Connected to WebSocket server.");
            };

            websocket.onclose = function (evt) {
                log("Disconnected");
            };

            websocket.onmessage = function (evt) {
                log('Retrieved data from server: ' + evt.data);
            };

            websocket.onerror = function (evt, e) {
                log('Error occured: ' + evt.data);
            };

            $(function () {
                //发送base64格式的图片
                $("#sendFileForm").submit(function () {
                    var file = document.getElementById("file").files[0];
                    if (!/image\/\w+/.test(file.type)) {
                        log("请上传图片！");
                        return false;
                    }
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function (e) {
                    var img_data = '{"type":"3","data":"' + this.result + '"}';
                        log("\n开始发送文件");
                        websocket.send(img_data);
                    }
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <h3>发送图片</h3>
        <div>
        <form id="sendFileForm">
            <input id="file" type="file" multiple />
            <input type="submit" value="Send" />
        </form>
        </div>
        <ul id="msg_paler"></ul>
        <br>
    </body>
</html></code>

Nach dem Login kopieren

Dies ist der Code zum Testen
Öffnen Sie zunächst einige Terminal-Ausführungstools wie Xshell, suchen Sie die PHP-Datei des Sockets, den Sie ausführen möchten, verwenden Sie den Befehl
Problem beim Hochladen von PHP-Websocket-Bildern
und öffnen Sie dann websocket.html über den Browser
Bei Erfolg wird zurückgegeben

Wählen Sie ein Bild zum Hochladen aus
Anzeigen Sie es im Browser
Zeigen Sie es auf dem Terminal an Gehen Sie dann zu dem Ordner, den Sie hochgeladen haben, um ihn anzuzeigen. Laden Sie die Datei hoch Problem beim Hochladen von PHP-Websocket-Bildern
Laden Sie einfach das Bild hoch