PHP的websocket上传图片问题

WBOY
Freigeben: 2016-08-04 09:21:24
Original
1649 Leute haben es durchsucht

现在要做websocket上传图片,了解到以下几点:
1 监听:首先要挂起一个进程来监听来自客户端的请求
2 握手:对于第一次合法的请求,发送合法的header回去
3 保持连接:有新消息到了就广播出去。直到客户端断开
4 接受另一个请求,重复2和3
但是对于文件上传还是很迷糊,求大神给个好理解的方法。

回复内容:

现在要做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>
Nach dem Login kopieren

返回一个上传好的图片路径
html部分websocket.html

<code>

    
        <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 + "");
            }
            //请求的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>
    
    
        <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>
    
</code>
Nach dem Login kopieren

代码就这些现在测试
先打开Xshell等一些终端运行工具,找到要运行的socket的PHP文件使用命令
PHP的websocket上传图片问题
然后打开通过浏览器打开websocket.html
如果成功会返回
PHP的websocket上传图片问题
选择一张图片上传
浏览器中查看PHP的websocket上传图片问题
在终端上显示PHP的websocket上传图片问题然后去自己上传的文件夹就可以看到上传的文件了PHP的websocket上传图片问题
上传图片就可以了

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!