用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
進去之後可以領紅包。