이제 websocket을 통해 사진을 업로드 하려고 하는데 다음과 같은 점을 배웠습니다.
1 모니터링: 먼저 클라이언트의 요청을 듣기 위해 프로세스를 일시 중지해야 합니다.
2 핸드셰이크: 처음으로 법적 요청, 법적 헤더 보내기
3 연결 상태 유지: 새 메시지가 도착하면 방송됩니다. 클라이언트 연결이 끊어질 때까지
4. 다른 요청을 수락하고 2, 3을 반복합니다
그런데 파일 업로드가 여전히 헷갈립니다. 더 나은 이해 방법을 알려주세요.
이제 websocket을 통해 사진을 업로드 하려고 하는데 다음과 같은 점을 배웠습니다.
1 모니터링: 먼저 클라이언트의 요청을 듣기 위해 프로세스를 일시 중지해야 합니다.
2 핸드셰이크: 처음으로 법적 요청, 법적 헤더 보내기
3 연결 상태 유지: 새 메시지가 도착하면 방송됩니다. 클라이언트 연결이 끊어질 때까지
4. 다른 요청을 수락하고 2, 3을 반복합니다
그런데 파일 업로드가 여전히 헷갈립니다. 더 나은 이해 방법을 알려주세요.
참고할 수 있도록 자신만의 솔루션을 게시하세요. 부족한 점이 있으면 조언해 주시기 바랍니다.
저는 PHP Swoole 프레임워크 링크인 http://www.swoole.com/과 HTML5 WebSocket을 사용합니다
돔의 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 등의 터미널 실행 도구를 열고 실행하려는 소켓의 PHP 파일을 찾아
명령을 사용한 다음 엽니다. 브라우저를 통해 websocket.html
성공하면 반환됩니다
업로드할 이미지 선택
브라우저에서 보기
터미널에 표시 그런 다음 업로드한 폴더로 이동하여 확인하세요. 파일 업로드
사진만 업로드하세요