首頁 > 文章 > 後端開發 > PHP的websocket上傳圖片問題

PHP的websocket上傳圖片問題

WBOY原創: 2016-08-04 09:21:241651瀏覽

現在要做websocket上傳圖片，了解到以下幾點：
1 監聽：首先要掛起一個進程來監聽來自客戶端的請求
2 握手：對於第一次合法的請求，發送合法的header回去
3 保持連結：有新消息到了就廣播出去。直到客戶端斷開
4 接受另一個請求，重複2和3
但是對於文件上傳還是很迷糊，求大神給個好理解的方法。

回覆內容：

自己吧解決方案貼出來提供大家參考，有不足之處希望大家能給指點
我使用的是php的swoole框架連結http://www.swoole.com/和HTML5 WebSocket
dome的php部分
server .php 我使用的是swoole框架根目錄/examples/websocket/server.php進行編輯
最主要的$server->onMessage部分程式碼

<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>

返回一個上傳好的圖片路徑
html部分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>

程式碼就這些現在測試
先打開Xshell等一些終端運行工具，找到要運行的socket的PHP文件使用命令
PHP的websocket上傳圖片問題
然後打開通過瀏覽器打開websocket.html
如果成功會返回

選擇一張圖片上傳
瀏覽器中查看
在終端機上顯示然後去自己上傳的資料夾就可以看到上傳的檔案了
上傳圖片就可以了

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：thinkphp的Ajax實作原理下一篇：thinkphp的Ajax實作原理

看更多

PHP的websocket上傳圖片問題

回覆內容：

相關文章