关闭

关于如何使用websocket 接收并显示图片或者操作二进制

5066人阅读 评论(5) 收藏 举报
分类:

今天想实现一个在firefox中使用websocket接收二进制图片并显示的功能。百度了半天..一堆人都说用MozBlobBuilder,可尼玛我的firefox游览器中就没这个对象!!版本(25.0.1)

回想一年前想实现用websocket实现模仿C++接收二进制并操作的时候,百度google上一堆人还说“js是不能实现二进制操作的”,我就开始火大了。都什么鸟玩意儿??百度上什么时候出现的那么多坑货来坑人的? 搞JS的牛人都去哪了?

实在受不了,发篇博客希望后者百度再想实现类似功能的时候不要再那么累了。

贴上代码 供参考:

JS操作websocket接收的二进制,安全性能有保障,已经过一年实践考验:


[javascript] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. ws.onmessage = function(evt) {  
  2.     if(typeof(evt.data)=="string"){  
  3.         textHandler(JSON.parse(evt.data));  
  4.     }else{  
  5.         var reader = new FileReader();  
  6.         reader.onload = function(evt){  
  7.             if(evt.target.readyState == FileReader.DONE){  
  8.                 var data = new Uint8Array(evt.target.result);  
  9.                 handler(data);  
  10.             }  
  11.         }  
  12.         reader.readAsArrayBuffer(evt.data);  
  13.     }  
  14. };    

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. function handler(data){  
  2.     switch(data[0]){  
  3.     case 1:  
  4.         getCard(data[1]);  
  5.         break;  
  6.   
  7. ...  

JS操作websocket接收的图片,今天刚写的,也是用filereader实现。

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. ws.onmessage = function(evt) {  
  2.     if(typeof(evt.data)=="string"){  
  3.         //textHandler(JSON.parse(evt.data));  
  4.     }else{  
  5.   var reader = new FileReader();  
  6.         reader.onload = function(evt){  
  7.             if(evt.target.readyState == FileReader.DONE){  
  8.                 var url = evt.target.result;  
  9.     alert(url);  
  10.                 var img = document.getElementById("imgDiv");  
  11.     img.innerHTML = "<img src = "+url+" />";  
  12.             }  
  13.         }  
  14.         reader.readAsDataURL(evt.data);  
  15.     }  
  16. };    

最后想说.看了那么多JS达人的博客,那么多转摘的文章,请问转摘之前自己实践过么?知道自己转的文章是正确的么??

我平时搞ERLANG 搞C 搞JAVA,偶尔才写一点JS小代码还被坑成这样,真心难受。

7
0
查看评论

js解析websocket二进制数据包

js解释数据包 做一个项目,服务器要给我发一个数据包,格式为,前面16位short,后32位int,后面就全是string,我用javascript怎么去把这个数据包解读出来?   用WebSocket,接收到的就是一个Blob对象.而我要给服务器返回的也是这种格式,...
  • woxingwosu0100
  • woxingwosu0100
  • 2016-04-28 13:15
  • 7861

关于如何使用websocket 接收并显示图片或者操作二进制

今天想实现一个在firefox中使用websocket接收二进制图片并显示的功能。百度了半天..一堆人都说用MozBlobBuilder,可尼玛我的firefox游览器中就没这个对象!!版本(25.0.1) 回想一年前想实现用websocket实现模仿C++接收二进制并操作的时候,百度google上...
  • kkkkk4400
  • kkkkk4400
  • 2013-11-27 10:32
  • 11538

WebSocket发送文字图片功能

先上效果图: 用户登录以后,就可以像服务端发送文字,或者图片;输入文字的时候,点击发送就可以了,如果发送图片,点击发送图片,选择图片后,会自动发送图片到服务器端;       WebSocket Chat Client   ...
  • qq165285727
  • qq165285727
  • 2017-11-23 11:22
  • 334

使用websocket接收服务端传来的图片

Websocket知识,大家可以查看互联网上找到很多相关的介绍,这里不再累述。这里者介绍如何发服务端通过websocket发送的图片显示在浏览器上。 首先来写服务端代码(SendImage.java): //配置客户端请求websocket的url @ServerEndpoint("...
  • ghpan
  • ghpan
  • 2014-09-10 11:29
  • 5641

关于如何使用websocket 接收并显示图片或者操作二进制

http://blog.csdn.net/kkkkk4400/article/details/16980647 今天想实现一个在firefox中使用websocket接收二进制图片并显示的功能。百度了半天..一堆人都说用MozBlobBuilder,可尼玛我的firefox游览器中就没...
  • mengzhengjie
  • mengzhengjie
  • 2018-01-16 18:30
  • 62

html上面通过websocket接收二进制图片数据并显示在页面上

webSocket.onmessage = function(event) {  if(typeof(event.data)=="string"){  onMessage(event);      }else{ &#...
  • wushuang443
  • wushuang443
  • 2017-03-23 13:47
  • 845

关于如何使用websocket 接收并显示图片或者操作二进制

JS操作websocket接收的二进制,安全性能有保障,已经过一年实践考验: [javascript] view plain copy ws.onmessage = function(evt) {   ...
  • LANGZI7758521
  • LANGZI7758521
  • 2016-05-26 22:09
  • 1811

用Netty实现Websocket(包含服务器代码和客户端网页)

  • 2013-05-06 14:56
  • 1.93MB
  • 下载

websocket实现聊天室应用,包括文字和图片上传

使用基于spring的websocket实现实时聊天功能,可以文字,也可以上传图片。
  • a4227139
  • a4227139
  • 2017-07-12 21:06
  • 3503

Spring+Websocket实现消息的推送 【转】

文章出处:Spring+Websocket实现消息的推送 本文主要有三个步骤 1、用户登录后建立websocket连接,默认选择websocket连接,如果浏览器不支持,则使用sockjs进行模拟连接 2、建立连接后,服务端返回该用户的未读消息 3、服务端进行相关操作后,推送给某一个用户或者所...
  • woshizhangliang999
  • woshizhangliang999
  • 2016-01-26 11:05
  • 2460
    个人资料
    • 访问:9402933次
    • 积分:78859
    • 等级:
    • 排名:第21名
    • 原创:264篇
    • 转载:2895篇
    • 译文:3篇
    • 评论:803条
    文章分类
    最新评论