用JavaScript接收并显示字节流中的图片

写了个网页版贪吃蛇，需要在前端接受后端传过来的字节流然后显示，谷歌上搜了一下，最后的代码如下，并且简单做下讲解。

socket.onmessage = function(msg) {
                var bytes = new Uint8Array(msg.data);
                var blob = new Blob([bytes], { type: "image/png" });
                var url = URL.createObjectURL(blob);
                document.getElementById('image').src = url;
                console.log("received some data");
            }

刚又去谷歌上面搜了一下，为了写这篇文章，又学了点新东西，毕竟自己没有完全搞明白的话没法给别人讲。

msg.data指的是接收到的数据，JavaScript的websocket是事件驱动的api，如果写成event.data就直观多了，socket.onmessage = function(msg)，这里的函数接受的参数其实是另一个peer给它发送了数据这一事件，并不直接是另外一个peer发送的数据。

Uint8Array表示8位无符号整数的数组。刚刚试了一下，直接写var blob = new Blob([msg.data], { type: “image/png” });也是可以的，字节流就是八位，和八位无符号整数是一样的。一定要多思考，多尝试。

Blob对象可以表示文件类型（file-like）的不可变的原始数据，因为这种文件格式（数据排列格式）在JavaScript中不是原生支持的，所以需要用Blob表示。在这里，blob变量就是png格式的图片，它的内部数据是bytes。

URL.createObjectURL方法会返回含有表示参数中的对象的url的DOMString，DOMString是UTF-16的字符串，因为JavaScript中已经支持UTF-16的String，所以它直接会被转换成String。（As JavaScript already uses such strings, DOMString is mapped directly to a String.）

Blob的url指的是对象数据在内存中的位置，这里可以通过url变量找到blob变量表示的那张png格式的图片。

最后，请允许我先打个广告，阿里云最近的优惠力度确实非常大，如果有这方面需求的朋友真的可以考虑一下，买个服务器，在上面部署一些自己的项目，不但可以练习很多，也是一种展示自己的方式。点这个链接：https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=090ljchw
进去之后可以领红包。