问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

PHP的websocket上传图片问题

头像
tb0902927
    6037

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

    phpwebsocket
    阅读 5.1k
    1 个回答
    得票最新
    头像
    tb0902927
      6037
      ✓ 已被采纳

      自己吧解决方案贴出来提供大家参考，有不足之处希望大家能给指点
      我使用的是php的swoole框架链接http://www.swoole.com/和HTML5 WebSocket
      dome的php部分
      server.php 我使用的是swoole框架根目录/examples/websocket/server.php进行编辑
      最主要的$server->onMessage部分代码

      $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";
});

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

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

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

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题