Websocket知识，大家可以查看互联网上找到很多相关的介绍，这里不再累述。这里者介绍如何发服务端通过websocket发送的图片显示在浏览器上。
首先来写服务端代码（SendImage.java）：
//配置客户端请求websocket的url
@ServerEndpoint("/sendImage")
publicclass SendImage {
//配置处理客户端消息的方法
@OnMessage
publicvoid getMessage(Session session ,Stringmessage){
try {
//本来打算根据客户端传来message中的文件名称来读取指定的文件，后来想想//还是不要因为其他东西干扰整个取文件的思路，所以就从固定文件夹下读取固定图片
FileInputStream fs = new FileInputStream("E:\\images\\photo_2.jpg");
//获取指定文件的长度并用它来创建一个可以存放内容的字节数组
byte[] content = newbyte[fs.available()];
//将图片内容读入到字节数组
fs.read(content);
//使用刚才的字节数组创建ByteBuffer对象
ByteBuffer byteBuffer = ByteBuffer.wrap(content);
Basic basic = session.getBasicRemote();
//发送byteBuffer对象到客户端
basic.sendBinary(byteBuffer);
//关闭文件流对象
fs.close();
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
//配置开启回话成功的方法
@OnOpen
publicvoid start(Session session){
System.out.println("connected...");
}
}
客户端代码如下（index.jsp）:
<script type="text/javascript">
var ws = {};//初始化ws对象
//init()方法为了初始化ws的一些具体回调函数，在body的onload事件中触发
function init()
{
//链接服务端
ws= new WebSocket("ws://localhost:9999/wsgetimage/sendImage");
//配置客户端连接成功的回调方法
ws.onopen=function(event){
console.log("open...");
};
//配置客户端处理消息的回调方法
ws.onmessage = function(event){
//创建FileReader对象，该对象时html5中的特有对象，详细用法可以//参照html5相关资料
var reader = new FileReader();
//设置FileReader对象的读取文件回调方法
reader.οnlοad=function(eve){
//判断文件是否读取完成
if(eve.target.readyState==FileReader.DONE)
{
//读取文件完成后，创建img标签来显示服务端传来的字节数//组
var img =document.createElement("img");
//读取文件完成后内容放在this===当前
//fileReader对象的result属性中，将该内容赋值img标签//浏览器就可以自动解析内容格式并且渲染在浏览器中
img.src=this.result;
//将标签添加到id为show的div中否则，即便是有img也看不见
document.getElementById("show").appendChild(img);
}
};
//调用FileReader的readAsDataURL的方法自动就会触发onload事件
reader.readAsDataURL(event.data);
};
}
//向服务端发送信息，这样服务端就会触发SendImage.java的getMessage方法，从
//而该方法回传给客户端一个图片
function sendMsg()
{
//发送的内容为任意字符，主要为了触发对应的方法
ws.send("hello");
}
</script>
<body onload="init()">
<input type="button"value="send" onclick="sendMsg()"/>
<div id="show"style="width:500px; height:300px; border:1px solid"></div>
</body>
扫一扫
3058
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
