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