suchen

Heim >Backend-Entwicklung >PHP-Tutorial >Problem beim Hochladen von PHP-Websocket-Bildern

Problem beim Hochladen von PHP-Websocket-Bildern

WBOY
WBOYOriginal
2016-08-04 09:21:241697Durchsuche

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>

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>

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Das Ajax-Implementierungsprinzip von thinkphpNächster Artikel：Das Ajax-Implementierungsprinzip von thinkphp

In Verbindung stehende Artikel

Mehr sehen