現在要做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>
返回一個上傳好的圖片路徑
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文件使用命令
然後打開通過瀏覽器打開websocket.html
如果成功會返回
選擇一張圖片上傳
瀏覽器中查看
在終端機上顯示然後去自己上傳的資料夾就可以看到上傳的檔案了
上傳圖片就可以了