https://kuizuo.cn/assets/js/bb524f7b.5a2cd8ef.js

1"use strict";(self.webpackChunkblog=self.webpackChunkblog||[]).push([["2724"],{92887(e,r,n){n.r(r),n.d(r,{assets:()=>c,contentTitle:()=>d,default:()=>h,frontMatter:()=>i,metadata:()=>t,toc:()=>a});var t=n(43320),s=n(25105),l=n(89999);let i={slug:"js-binary-data",title:"JavaScript\u4E2D\u7684\u4E8C\u8FDB\u5236\u6570\u636E",date:new Date("2022-01-24T00:00:00.000Z"),authors:"kuizuo",tags:["javascript"],keywords:["javascript"]},d,c={authorsImageUrls:[void 0]},a=[{value:"ArrayBuffer",id:"arraybuffer",level:2},{value:"TypedArray",id:"typedarray",level:2},{value:"NodeJS \u7684 Buffer",id:"nodejs-\u7684-buffer",level:2},{value:"Buffer.from",id:"bufferfrom",level:3},{value:"buf.toJSON()",id:"buftojson",level:3},{value:"ArrayBuffer \u548C Buffer \u533A\u522B",id:"arraybuffer-\u548C-buffer-\u533A\u522B",level:2},{value:"\u5E94\u7528",id:"\u5E94\u7528",level:2},{value:"\u7F16\u7801\u8F6C\u5316",id:"\u7F16\u7801\u8F6C\u5316",level:3},{value:"\u5C06\u8BF7\u6C42\u56FE\u7247\u8F6C\u5316\u6210 base64 \u7F16\u7801",id:"\u5C06\u8BF7\u6C42\u56FE\u7247\u8F6C\u5316\u6210-base64-\u7F16\u7801",level:3},{value:"http \u53D1\u9001\u4E8C\u8FDB\u5236\u6570\u636E\u4E0E WebSocket",id:"http-\u53D1\u9001\u4E8C\u8FDB\u5236\u6570\u636E\u4E0E-websocket",level:3},{value:"\u6587\u4EF6\u8BFB\u5199",id:"\u6587\u4EF6\u8BFB\u5199",level:3},{value:"\u53C2\u8003",id:"\u53C2\u8003",level:2}];function f(e){let r={a:"a",blockquote:"blockquote",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,l.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(r.p,{children:"\u5728\u6211\u7F16\u5199 js \u4EE3\u7801\u4E2D\uFF0C\u5173\u4E8E\u5904\u7406\u4E8C\u8FDB\u5236\u6570\u636E\u4E86\u89E3\u751A\u5C11\uFF0C\u597D\u50CF\u90FD\u662F\u7528\u6570\u7EC4\u8868\u793A\uFF0C\u4F46\u662F\u6210\u5458\u53C8\u5F88\u6A21\u7CCA\u3002\u5C24\u5176\u662F\u5728\u9047\u5230\u4E00\u4E9B http \u7684 post \u8BF7\u6C42\u6216 websocket\uFF0C\u53D1\u9001\u4E8C\u8FDB\u5236\u6570\u636E\uFF08\u5B57\u8282\uFF09\u65F6\uFF0C\u8FD8\u6709\u4E00\u4E9B\u7B97\u6CD5\u7684\u7FFB\u8BD1\uFF0C\u6570\u636E\u7684\u8F6C\u5316\uFF0C\u534F\u8BAE\u7684\u590D\u73B0\uFF0C\u90FD\u9700\u8981\u4E0D\u65AD\u7684\u4ECE\u7F51\u7EDC\u4E0A\u67E5\u9605\uFF0C\u5E76\u672A\u7CFB\u7EDF\u7684\u4ECE\u6587\u6863\u6559\u7A0B\u4E2D\u5165\u624B\u3002\u4E8E\u662F\u5199\u8FD9\u7BC7\u7684\u76EE\u7684\u5C31\u662F\u4E3A\u4E86\u52A0\u56FA\u5BF9\u4E8C\u8FDB\u5236\u6570\u636E\u7684\u7406\u89E3\uFF0C\u4EE5\u53CA JavaScript \u4E2D\u5982\u4F55\u64CD\u4F5C\u4E8C\u8FDB\u5236\u6570\u636E\u7684\u3002"}),"\n","\n",(0,s.jsx)(r.h2,{id:"arraybuffer",children:"ArrayBuffer"}),"\n",(0,s.jsx)(r.p,{children:"\u5176\u4ED6\u8BED\u8A00 java\uFF0C\u6613\u6240\u8868\u793A\u7684\u662F\u5B57\u8282\u6570\u7EC4\uFF0C\u5B57\u8282\u96C6\uFF0C\u800C\u5728 js \u4E2D\u5219\u79F0\u4E8C\u8FDB\u5236\u6570\u7EC4\uFF08\u90FD\u662F\u7528\u6765\u8868\u793A\u4E8C\u8FDB\u5236\u6570\u636E\u7684\uFF09\uFF0C\u8981\u6CE8\u610F\u7684\u662F\u8FD9\u91CC\u7684\u4E8C\u8FDB\u5236\u6570\u7EC4\u5E76\u4E0D\u662F\u771F\u6B63\u7684\u6570\u7EC4\uFF0C\u800C\u662F\u7C7B\u4F3C\u6570\u7EC4\u7684\u5BF9\u8C61\u3002\uFF08\u540E\u6587\u4F1A\u

163D0\u5230\uFF09"}),"\n",(0,s.jsxs)(r.p,{children:["\u5B58\u50A8\u4E8C\u8FDB\u5236\u6570\u636E\u7528\u5230\u7684\u5C31\u662F",(0,s.jsx)(r.code,{children:"ArrayBuffer"}),"\uFF0C\u4F46 ",(0,s.jsx)(r.code,{children:"ArrayBuffer"}),"\u4E0D\u80FD\u76F4\u63A5\u8BFB\u5199\uFF0C\u53EA\u80FD\u5B58\u50A8\uFF0C\u9700\u8981\u901A\u8FC7\u89C6\u56FE\u6765\u8FDB\u884C\u64CD\u4F5C\u3002"]}),"\n",(0,s.jsxs)(r.p,{children:["\u4F8B\u5982\u5B58\u50A8\u4E8C\u8FDB\u5236\u6570\u636E\u7684\u5219\u662F ArrayBuffer \u5BF9\u8C61\uFF0C\u4F8B\u5982\u8BF7\u6C42\u56FE\u7247\u65F6\uFF0C\u5C31\u4F1A\u6307\u5B9A\u53C2\u6570 ",(0,s.jsx)(r.code,{children:"responseType: 'arraybuffer'"}),"\u8868\u793A\u8FD4\u56DE\u4E8C\u8FDB\u5236\u6570\u636E\uFF0C\u4E5F\u5C31\u662F\u56FE\u7247\u6570\u636E\u3002"]}),"\n",(0,s.jsxs)(r.p,{children:[(0,s.jsx)(r.code,{children:"ArrayBuffer"}),"\u4E5F\u662F\u4E00\u4E2A\u6784\u9020\u51FD\u6570\uFF0C\u53EF\u4EE5\u5206\u914D\u4E00\u6BB5\u53EF\u4EE5\u5B58\u653E\u6570\u636E\u7684\u8FDE\u7EED\u5185\u5B58\u533A\u57DF\u3002"]}),"\n",(0,s.jsx)(r.pre,{children:(0,s.jsx)(r.code,{className:"language-javascript",children:"const buffer = new ArrayBuffer(8)\n"})}),"\n",(0,s.jsx)(r.pre,{children:(0,s.jsx)(r.code,{className:"language-javascript",children:"ArrayBuffer {\n  [Uint8Contents]: <00 00 00 00 00 00 00 00>,\n  byteLength: 8\n}\n"})}),"\n",(0,s.jsx)(r.p,{children:"\u8FD9\u91CC\u7684 buffer.byteLength \u5C5E\u6027\u7528\u4E8E\u83B7\u53D6\u5B57\u8282\u957F\u5EA6\uFF08\u8FD4\u56DE 32\uFF09\uFF0C\u76F4\u63A5\u6253\u5370 buf \u7684\u7ED3\u679C"}),"\n",(0,s.jsxs)(r.p,{children:["\u5176\u4E2D\u8FD8\u6709\u4E00\u4E2A",(0,s.jsx)(r.code,{children:"slice"}),"\u65B9\u6CD5\uFF0C\u5141\u8BB8\u5C06\u5185\u5B58\u533A\u57DF\u7684\u4E00\u90E8\u5206\uFF0C\u62F7\u8D1D\u751F\u6210\u4E00\u4E2A\u65B0\u7684",(0,s.jsx)(r.code,{children:"ArrayBuffer"}),"\u5BF9\u8C61\u3002\u4E0B\u9762\u4EE3\u7801\u62F7\u8D1D",(0,s.jsx)(r.code,{children:"buffer"}),"\u5BF9\u8C61\u7684\u524D 3 \u4E2A\u5B57\u8282\uFF08\u4ECE 0 \u5F00\u59CB\uFF0C\u5230\u7B2C 3 \u4E2A\u5B57\u8282\u524D\u9762\u7ED3\u675F\uFF09"]}),"\n",(0,s.jsx)(r.pre,{children:(0,s.jsx)(r.code,{className:"language-javascript",children:"const buffer = new ArrayBuffer(8)\nconst newBuffer = buffer.slice(0, 3)\n"})}),"\n",(0,s.jsxs)(r.p,{children:["\u9664\u4E86",(0,s.jsx)(r.code,{children:"slice"}),"\u65B9\u6CD5\uFF0C",(0,s.jsx)(r.code,{children:"ArrayBuffer"}),"\u5BF9\u8C61\u4E0D\u63D0\u4F9B\u4EFB\u4F55\u76F4\u63A5\u8BFB\u5199\u5185\u5B58\u7684\u65B9\u6CD5\uFF0C\u53EA\u5141\u8BB8\u5728\u5176\u4E0A\u65B9\u5EFA\u7ACB\u89C6\u56FE\uFF0C\u7136\u540E\u901A\u8FC7\u89C6\u56FE\u8BFB\u5199\u3002"]}),"\n",(0,s.jsx)(r.h2,{id:"typedarray",children:"TypedArray"}),"\n",(0,s.jsxs)(r.p,{children:["\u4E0D\u8FC7\u53EA\u6709\u7A7A\u6570\u636E\u53EF\u6CA1\u7528\uFF0C\u80AF\u5B9A\u9700\u8981\u64CD\u4F5C",(0,s.jsx)(r.code,{children:"ArrayBuffer"}),"\uFF0C\u4E5F\u5C31\u8981\u4ECB\u7ECD\u4E0B",(0,s.jsx)(r.code,{children:"TypedArray"}),"\u3002"]}),"\n",(0,s.jsxs)(r.p,{children:[(0,s.jsx)(r.code,{children:"ArrayBuffer"}),"\u5BF9\u8C61\u4F5C\u4E3A\u5185\u5B58\u533A\u57DF\uFF0C\u53EF\u4EE5\u5B58\u653E\u591A\u79CD\u7C7B\u578B\u7684\u6570\u636E\u3002\u540C\u4E00\u6BB5\u5185\u5B58\uFF0C\u4E0D\u540C\u6570\u636E\u6709\u4E0D\u540C\u7684\u89E3\u8BFB\u65B9\u5F0F\uFF0C\u8FD9\u5C31\u53EB\u505A\u201C\u89C6\u56FE\u201D\uFF08view\uFF09\uFF0C",(0,s.jsx)(r.code,{children:"ArrayBuffer"}),"\u6709\u4E24\u79CD\u89C6\u56FE\uFF0C\u4E00\u79CD\u662F",(0,s.jsx)(r.code,{children:"TypedArray"}),"\u89C6\u56FE\uFF0C\u53E6\u4E00\u79CD\u662F",(0,s.jsx)(r.code,{children:"DataView"}),"\u89C6\u56FE\u3002\u8FD9\u91CC\u53EA\u4ECB\u7ECD",(0,s.jsx)(r.code,{children:"TypedArray"})]}),"\n",(0,s.jsxs)(r.p,{children:[(0,s.jsx)(r.code,{children:"TypedArray"}),"\u89C6\u56FE\u4E00\u5171\u5305\u62EC 9 \u79CD\u7C7B\u578B\uFF0C\u6BCF\u4E00\u79CD\u89C6\u56FE\u90FD\u662F\u4E00\u79CD\u6784\u9020\u51FD\u6570\u901A\u8FC7 9 \u4E2A\u6784\u9020\u51FD\u6570\uFF0C\u53EF\u4EE5\u751F\u6210 9 \u79CD\u6570\u636E\u683C\u5F0F\u7684\u89C6\u56FE\uFF0C\u6BD4\u5982",(0,s.jsx)(r.code,{children:"Uint8Array"}),"\uFF08\u65E0\u7B26\u53F7 8 \u4F4D\u6574\u6570\uFF0C\u8868\u793A\u4E00\u4E2A\u5B57\u8282\uFF09\u6570\u7EC4\u89C6\u56FE\uFF0C\u5177\u4F53\u5982\u4E0B"]}),"\n",(0,s.jsxs)(r.table,{children:[(0,s.jsx)(r.thead,{children:(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.th,{style:{textAlign:"left"},children:"\u6570\u636E\u7C7B\u578B"}),(0,s.jsx)(r.th,{style:{textAlign:"left"},children:"\u5B57\u8282\u957F\u5EA6"}),(0,s.jsx)(r.th,{style:{textAlign:"left"},children:"\u542B\u4E49"}),(0,s.jsx)(r.th,{style:{textAlign:"left"},children:"\u5BF9\u5E94\u7684 C \u8BED\u8A00\u7C7B\u578B"})]})}),(0,s.jsxs)(r.tbody,{children:[(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"Int8"}),(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"1"}),(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"8 \u4F4D\u5E26\u7B26\u53F7\u6574\u6570"}),(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"signed char"})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"Uint8"}),(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"1"}),(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"8 \u4F4D\u4E0D\u5E26\u7B26\u53F7\u6574\u6570"}),(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"unsigned char"})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"Uint8C"}),(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"1"}),(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"8 \u4F4D\u4E0D\u5E26\u7B26\u53F7\u6574\u6570\uFF08\u81EA\u52A8\u8FC7\u6EE4\u6EA2\u51FA\uFF09"}),(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"unsigned char"})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"Int16"}),(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"2"}),(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"16 \u4F4D\u5E26\u7B26\u53F7\u6574\u6570"}),(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"short"})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"Uint16"}),(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"2"}),(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"16 \u4F4D\u4E0D\u5E26\u7B26\u53F7\u6574\u6570"}),(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"unsigned short"})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"Int32"}),(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"4"}),(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"32 \u4F4D\u5E26\u7B26\u53F7\u6574\u6570"}),(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"int"})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"Uint32"}),(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"4"}),(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"32 \u4F4D\u4E0D\u5E26\u7B26\u53F7\u7684\u6574\u6570"}),(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"unsigned int"})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"Float32"}),(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"4"}),(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"32 \u4F4D\u6D6E\u70B9\u6570"}),(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"float"})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"Float64"}),(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"8"}),(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"64 \u4F4D\u6D6E\u70B9\u6570"}),(0,s.jsx)(r.td,{style:{textAlign:"left"},children:"double"})]})]})]}),"\n",(0,s.jsx)(r.p,{children:"\u89C6\u56FE\u7684\u6784\u9020\u51FD\u6570\u53EF\u4EE5\u63A5\u53D7\u4E09\u4E2A\u53C2\u6570\uFF1A"}),"\n",(0,s.jsxs)(r.ul,{children:["\n",(0,s.jsxs)(r.li,{children:["\u7B2C\u4E00\u4E2A\u53C2\u6570\uFF08\u5FC5\u9700\uFF09\uFF1A\u89C6\u56FE\u5BF9\u5E94\u7684\u5E95\u5C42",(0,s.jsx)(r.code,{children:"ArrayBuffer"}),"\u5BF9\u8C61\u3002"]}),"\n",(0,s.jsx)(r.li,{children:"\u7B2C\u4E8C\u4E2A\u53C2\u6570\uFF08\u53EF\u9009\uFF09\uFF1A\u89C6\u56FE\u5F00\u59CB\u7684\u5B57\u8282\u5E8F\u53F7\uFF0C\u9ED8\u8BA4\u4ECE 0 \u5F00\u59CB\u3002"}),"\n",(0,s.jsx)(r.li,{children:"\u7B2C\u4E09\u4E2A\u53C2\u6570\uFF08\u53EF\u9009\uFF09\uFF1A\u89C6\u56FE\u5305\u542B\u7684\u6570\u636E\u4E2A\u6570\uFF0C\u9ED8\u8BA4\u76F4\u5230\u672C\u6BB5\u5185\u5B58\u533A\u57DF\u7ED3\u675F\u3002"}),"\n"]}),"\n",(0,s.jsx)(r.p,{children:"\u6F14\u793A"}),"\n",(0,s.jsx)(r.p,{children:"\u4E0D\u59A8\u7ED9\u5B83\u5199\u5165\u5B57\u7B26\u4E32 abc\uFF0C\u5BF9\u5E94\u7684\u5341\u8FDB\u5236 ASCII \u7801\u4

1E3A 97,98,99\uFF0C\u7531\u4E8E ASCII \u7801\u5360\u7528\u4E00\u4E2A\u5B57\u8282\u5B58\u50A8\uFF0C\u6240\u4EE5\u8FD9\u91CC\u9009\u62E9 Uint8Array \u7528\u4E8E\u8868\u793A"}),"\n",(0,s.jsx)(r.pre,{children:(0,s.jsx)(r.code,{className:"language-javascript",children:"const buffer = new ArrayBuffer(8);\nconst buf = new Uint8Array(buffer);\nbuf.set([97, 98, 99]);\nconsole.log(buf.buffer);\n\n// \u8F93\u51FA\u7ED3\u679C\nArrayBuffer {\n  [Uint8Contents]: <61 62 63 00 00 00 00 00>,\n  byteLength: 8\n}\n"})}),"\n",(0,s.jsxs)(r.p,{children:["\u53EF\u4EE5\u770B\u5230 abc \u786E\u5B9E\u5B58\u5165\u4E86\uFF0C\u5E76\u7528\u5341\u516D\u8FDB\u5236\u7684\u5F62\u5F0F\u8868\u793A\uFF0C\u4E3A\u4E86\u9A8C\u8BC1\uFF0C\u8FD9\u91CC\u4F7F\u7528 NodeJS \u4E2D\u7684 Buffer \u6765\u6F14\u793A\uFF0C\u5F53\u7136\u4E5F\u53EF\u4EE5\u4F7F\u7528\u539F\u751F\u7684",(0,s.jsx)(r.a,{href:"https://es6.ruanyifeng.com/#docs/arraybuffer#ArrayBuffer-%E4%B8%8E%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E4%BA%92%E7%9B%B8%E8%BD%AC%E6%8D%A2",children:"TextEncoder"})]}),"\n",(0,s.jsx)(r.pre,{children:(0,s.jsx)(r.code,{className:"language-javascript",children:"Buffer.from(buf.buffer).toString() // abc\n"})}),"\n",(0,s.jsxs)(r.p,{children:["\u4F60\u4E5F\u53EF\u4EE5\u76F4\u63A5\u901A\u8FC7\u6570\u7EC4\u4E0B\u6807\u7684\u5F62\u5F0F\uFF0C\u6765\u8BBF\u95EE\u6570\u636E\uFF0C\u5982",(0,s.jsx)(r.code,{children:"buf[0]"}),"\u8FD4\u56DE\u7684\u5C31\u662F 97\uFF0C\u4F46 buf \u53C8\u6709 length \u4E0E\u5176\u4ED6\u7684\u5C5E\u6027\u65B9\u6CD5\uFF0C\u8FD9\u79CD\u6570\u7EC4\u5C31\u7EDF\u79F0\u4E3A\u7C7B\u6570\u7EC4\u3002"]}),"\n",(0,s.jsxs)(r.p,{children:["buf \u8FD8\u6709\u4E00\u4E9B\u65B9\u6CD5\uFF0C\u65E0\u975E\u5C31\u662F\u64CD\u4F5C\u5B57\u8282\u590D\u5236\uFF0C\u504F\u79FB\u5C31\u4E0D\u505A\u8FC7\u591A\u4ECB\u7ECD\u4E0E\u6F14\u793A\u4E86\uFF0C\u5177\u4F53\u53EF\u67E5\u770B",(0,s.jsx)(r.a,{href:"https://es6.ruanyifeng.com/#docs/arraybuffer",children:"\u6587\u6863"})]}),"\n",(0,s.jsx)(r.h2,{id:"nodejs-\u7684-buffer",children:"NodeJS \u7684 Buffer"}),"\n",(0,s.jsx)(r.p,{children:(0,s.jsx)(r.a,{href:"http://nodejs.cn/api/buffer.html#buffer_buffers_and_character_encodings",children:"buffer \u7F13\u51B2\u533A | Node.js API \u6587\u6863 (nodejs.cn)"})}),"\n",(0,s.jsxs)(r.p,{children:["\u5728 Nodejs \u4E2D\u6709\u4E13\u95E8\u7684\u64CD\u4F5C",(0,s.jsx)(r.code,{children:"ArrayBuffer"})," \u7684\u5BF9\u8C61",(0,s.jsx)(r.code,{children:"Buffer"}),"\uFF0C",(0,s.jsx)(r.code,{children:"Buffer"})," \u7C7B\u662F JavaScript ",(0,s.jsx)(r.a,{href:"http://url.nodejs.cn/ZbDkpm",children:(0,s.jsx)(r.code,{children:"Uint8Array"})})," \u7C7B\u7684\u5B50\u7C7B"]}),"\n",(0,s.jsxs)(r.p,{children:["\u6240\u4EE5",(0,s.jsx)(r.code,{children:"Uint8Array"}),"\u6709\u7684\u5C5E\u6027\u65B9\u6CD5 Buffer \u4E5F\u6709\uFF0C\u4E0D\u8FC7 Nodejs \u5BF9 Buffer \u589E\u52A0\u4E86\u989D\u5916\u7684\u65B9\u6CD5\u4F9B\u5F00\u53D1\u8005\u8C03\u7528\u3002"]}),"\n",(0,s.jsx)(r.h3,{id:"bufferfrom",children:(0,s.jsx)(r.a,{href:"http://nodejs.cn/api/buffer.html#static-method-bufferfromarray",children:"Buffer.from"})}),"\n",(0,s.jsxs)(r.p,{children:["\u4E0A\u9762\u7684\u4EE3\u7801 ",(0,s.jsx)(r.code,{children:"Buffer.from(buf.buffer).toString()"}),"\uFF0C\u4E5F\u5C31\u662F\u5C06",(0,s.jsx)(r.code,{children:"ArrayBuffer"})," \u6570\u636E\u8F6C\u4E3A utf8 \u7F16\u7801\u6587\u672C\u3002\u5176\u4E2D toString \u8FD8\u80FD\u8F6C\u4E3A\u4EE5\u4E0B\u7F16\u7801\uFF08toString \u9ED8\u8BA4 utf8\uFF09"]}),"\n",(0,s.jsx)(r.pre,{children:(0,s.jsx)(r.code,{className:"language-typescript",children:"type BufferEncoding = 'ascii' | 'utf8' | 'utf-8' | 'utf16le' | 'ucs2' | 'ucs-2' | 'base64' | 'base64url' | 'latin1' | 'binary' | 'hex'\n"})}),"\n",(0,s.jsx)(r.p,{children:"\u4E0D\u8FC7 Nodejs \u4E0D\u652F\u6301 gbk \u7F16\u7801\uFF0C\u6240\u4EE5\u9700\u8981\u4F7F\u7528\u7B2C\u4E09\u65B9\u5305\uFF0C\u5982 iconv-lite"}),"\n",(0,s.jsxs)(r.p,{children:[(0,s.jsx)(r.code,{children:"Buffer.from()"}),"\u6709\u591A\u4E2A\u65B9\u6CD5\u5B9E\u73B0\uFF0C\u7B2C\u4E00\u4E2A\u53C2\u6570\u53EF\u4EE5\u4F20\u5165 ArrayBuffer | Uint8Array | string\uFF0C\u5982\u679C\u662F string \u7C7B\u578B\uFF0C\u7B2C\u4E8C\u4E2A\u53C2\u6570\u4E3A\u7F16\u7801\u683C\u5F0F\uFF0C\u4F8B\u5982\u5B9E\u73B0\u7F16\u7801\u8F6C\u5316"]}),"\n",(0,s.jsx)(r.pre,{children:(0,s.jsx)(r.code,{className:"language-javascript",children:"// base64\nBuffer.from(str).toString('base64') // \u5C06str\u8F6Cbase64\u7F16\u7801\nBuffer.from(str, 'base64').toString() // \u5C06base64\u7F16\u7801\u8F6Cstr\n\n// hex\nBuffer.from(str).toString('hex') // \u5C06str\u8F6Chex\u7F16\u7801\nBuffer.from(str, 'hex').toString() // \u5C06hex\u7F16\u7801\u8F6Cstr\n"})}),"\n",(0,s.jsx)(r.p,{children:"\u5C01\u88C5 Base64 \u7F16\u7801\u4

1E0E\u89E3\u7801"}),"\n",(0,s.jsx)(r.pre,{children:(0,s.jsx)(r.code,{className:"language-javascript",children:"const Base64 = {\n  encode: (str) => {\n    return Buffer.from(str).toString('base64')\n  },\n  decode: (str) => {\n    return Buffer.from(str, 'base64').toString()\n  },\n}\n"})}),"\n",(0,s.jsx)(r.h3,{id:"buftojson",children:(0,s.jsx)(r.a,{href:"http://nodejs.cn/api/buffer.html#buftojson",children:"buf.toJSON()"})}),"\n",(0,s.jsx)(r.p,{children:"\u5C06\u4F1A\u5F97\u5230 buf \u7684\u89C6\u56FE\u7C7B\u578B\uFF0C\u4E0E\u4E8C\u8FDB\u5236\u6570\u7EC4\u3002"}),"\n",(0,s.jsx)(r.pre,{children:(0,s.jsx)(r.code,{className:"language-javascript",children:"// let buf = Buffer.from('abc');\nlet buf = Buffer.from([97, 98, 99])\nconsole.log(buf) // <Buffer 61 62 63>\n\nbuf.toJSON() // { type: 'Buffer', data: [ 97, 98, 99 ] }\n// \u6548\u679C\u7B49\u540C\u4E8E JSON.stringify(buf);\n\nbuf.values() // [ 97, 98, 99 ]   \u53EF\u4EE5\u76F4\u63A5\u5F97\u5230\u4E8C\u8FDB\u5236\u6570\u636E\n"})}),"\n",(0,s.jsxs)(r.p,{children:["\u5B98\u65B9\u6587\u6863: ",(0,s.jsx)(r.a,{href:"http://nodejs.cn/api/buffer.html#buffer",children:"buffer \u7F13\u51B2\u533A | Node.js API \u6587\u6863 (nodejs.cn)"})]}),"\n",(0,s.jsx)(r.h2,{id:"arraybuffer-\u548C-buffer-\u533A\u522B",children:"ArrayBuffer \u548C Buffer \u533A\u522B"}),"\n",(0,s.jsx)(r.p,{children:"\u4E0A\u8FF0\u5BF9\u8FD9\u4E24\u8005\u8FDB\u884C\u4E86\u4ECB\u7ECD\uFF0C\u8FD9\u91CC\u603B\u7ED3\u4E00\u4E0B"}),"\n",(0,s.jsxs)(r.p,{children:[(0,s.jsx)(r.code,{children:"ArrayBuffer"})," \u5BF9\u8C61\u7528\u6765\u8868\u793A\u901A\u7528\u7684\u3001\u56FA\u5B9A\u957F\u5EA6\u7684\u539F\u59CB\u4E8C\u8FDB\u5236\u6570\u636E\u7F13\u51B2\u533A\uFF0C\u662F\u4E00\u4E2A\u5B57\u8282\u6570\u7EC4\uFF0C\u53EF\u8BFB\u4F46\u4E0D\u53EF\u76F4\u63A5\u5199\u3002"]}),"\n",(0,s.jsxs)(r.p,{children:[(0,s.jsx)(r.code,{children:"Buffer"})," \u662F Node.JS \u4E2D\u7528\u4E8E\u64CD\u4F5C ",(0,s.jsx)(r.code,{children:"ArrayBuffer"})," \u7684\u89C6\u56FE\uFF0C\u7EE7\u627F\u81EA",(0,s.jsx)(r.code,{children:"Uint8Array"}),"\uFF0C\u662F ",(0,s.jsx)(r.code,{children:"TypedArray"})," \u7684\u4E00\u79CD\u3002"]}),"\n",(0,s.jsxs)(r.p,{children:["\u901A\u4FD7\u70B9\u6765\u8BF4\uFF08",(0,s.jsx)(r.strong,{children:"\u5BF9\u6211\u800C\u8A00"}),"\uFF09\uFF0C",(0,s.jsx)(r.code,{children:"ArrayBuffer"}),"\u76F8\u5F53\u4E8E\u5176\u4ED6\u8BED\u8A00\u7684\u5B57\u8282\u6570\u7EC4\u3001\u5B57\u8282\u96C6\uFF0C\u4F46\u4E0D\u53EF\u5199\uFF0C\u800C",(0,s.jsx)(r.code,{children:"Buffer"})," \u5BF9\u8C61\u5219\u662F\u64CD\u4F5C",(0,s.jsx)(r.code,{children:"ArrayBuffer"}),"\u7684\u3002"]}),"\n",(0,s.jsx)(r.h2,{id:"\u5E94\u7528",children:"\u5E94\u7528"}),"\n",(0,s.jsx)(r.p,{children:"\u4E0E\u4E8C\u8FDB\u5236\u6570\u636E\u6709\u5173\u7684\u5730\u65B9\u5C31\u6709\u5E94\u7528"}),"\n",(0,s.jsx)(r.h3,{id:"\u7F16\u7801\u8F6C\u5316",children:"\u7F16\u7801\u8F6C\u5316"}),"\n",(0,s.jsx)(r.h3,{id:"\u5C06\u8BF7\u6C42\u56FE\u7247\u8F6C\u5316\u6210-base64-\u7F16\u7801",children:"\u5C06\u8BF7\u6C42\u56FE\u7247\u8F6C\u5316\u6210 base64 \u7F16\u7801"}),"\n",(0,s.jsx)(r.pre,{children:(0,s.jsx)(r.code,{className:"language-javascript",children:"axios\n  .get('\u56FE\u7247url\u5730\u5740', {\n    responseType: 'arraybuffer',\n  })\n  .then((res) => {\n    let base64Img = res.data.toString('base64')\n    console.log(base64Img)\n  })\n"})}),"\n",(0,s.jsxs)(r.p,{children:["\u5728 axios \u8BF7\u6C42\u56FE\u7247\u6570\u636E\u7684\u65F6\u5019\uFF0C\u6307\u5B9A",(0,s.jsx)(r.code,{children:"responseType: 'arraybuffer'"}),"\uFF0C\u8FD4\u56DE\u7684 data \u5C31\u662F\u4E00\u4E2A buffer \u5BF9\u8C61\u3002\uFF08\u5F53\u65F6\u5199\u6210\u8FD9\u6837\u7684\u4EE3\u7801 ",(0,s.jsx)(r.code,{children:"Buffer.from(res.data).buffer"}),"\uFF0C\u4E0D\u8FC7\u4E0D\u59A8\u788D\uFF09"]}),"\n",(0,s.jsx)(r.h3,{id:"http-\u53D1\u9001\u4E8C\u8FDB\u5236\u6570\u636E\u4E0E-websocket",children:"http \u53D1\u9001\u4E8C\u8FDB\u5236\u6570\u636E\u4E0E WebSocket"}),"\n",(0,s.jsx)(r.pre,{children:(0,s.jsx)(r.code,{className:"language-javascript",children:"axios.post('http://example.com', Buffer.from('abc')).then((res) => {\n  console.log(res.data)\n})\n"})}),"\n",(0,s.jsx)(r.pre,{children:(0,s.jsx)(r.code,{className:"language-javascript",children:"let socket = new WebSocket('ws://127.0.0.1:8081')\nsocket.binaryType = 'arraybuffer'\n\n// Wait until socket is open\nsocket.addEventListener('open', function (event) {\n  // Send binary data\n  const typedArray = new Uint8Array(4)\n  socket.send(typedArray.buffer)\n})\n\n// Receive binary data\nsocket.addEventListener('message', function (event) {\n  const arrayBuffer = event.data\n  // \xb7\xb7\xb7\n})\n"})}),"\n",(0,s.jsx)(r.h3,{id:"\u6587\u4EF6\u8BFB\u5199",children:"\u6587\u4EF6\u8BFB\u5199"}),"\n",(0,s.jsx)(r.p,{children:"\u7B49\u7B49\u3002\u3002\u3002"}),"\n",(0,s.jsx)(r.h2,{id:"\u53C2\u8003",children:"\u53C2\u8003"}),"\n",(0,s.jsxs)(r.blockquote,{children:["\n",(0,s.jsx)(r.p,{children:(0,s.jsx)(r.a,{href:"https://es6.ruanyifeng.com/#docs/arraybuffer",children:"ArrayBuffer - ECMAScript 6 \u5165\u95E8 (ruanyifeng.com)"})}),"\n",(0,s.jsx)(r.p,{children:(0,s.jsx)(r.a,{href:"https://www.zhihu.com/question/26246195/answer/1231680251#ref_1",children:"ArrayBuffer \u548C Buffer \u6709\u4F55\u533A\u522B\uFF1F - \u77E5\u4E4E (zhihu.com)"})}),"\n"]})]})}function h(e={}){let{wrapper:r}={...(0,l.R)(),...e.components};return r?(0,s.jsx)(r,{...e,children:(0,s.jsx)(f,{...e})}):f(e)}},89999(e,r,n){n.d(r,{R:()=>i,x:()=>d});var t=n(58101);let s={},l=t.createContext(s);function i(e){let r=t.useContext(l);return t.useMemo(function(){return"function"==typeof e?e(r):{...r,...e}},[r,e])}function d(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),t.createElement(l.Provider,{value:r},e.children)}},43320(e){e.exports=JSON.parse('{"permalink":"/blog/js-binary-data","editUrl":"https://github.com/kuizuo/blog/edit/main/blog/develop/JavaScript\u4E2D\u7684\u4E8C\u8FDB\u5236\u6570\u636E.md","source":"@site/blog/develop/JavaScript\u4E2D\u7684\u4E8C\u8FDB\u5236\u6570\u636E.md","title":"JavaScript\u4E2D\u7684\u4E8C\u8FDB\u5236\u6570\u636E","description":"\u5728\u6211\u7F16\u5199 js \u4EE3\u7801\u4

1E2D\uFF0C\u5173\u4E8E\u5904\u7406\u4E8C\u8FDB\u5236\u6570\u636E\u4E86\u89E3\u751A\u5C11\uFF0C\u597D\u50CF\u90FD\u662F\u7528\u6570\u7EC4\u8868\u793A\uFF0C\u4F46\u662F\u6210\u5458\u53C8\u5F88\u6A21\u7CCA\u3002\u5C24\u5176\u662F\u5728\u9047\u5230\u4E00\u4E9B http \u7684 post \u8BF7\u6C42\u6216 websocket\uFF0C\u53D1\u9001\u4E8C\u8FDB\u5236\u6570\u636E\uFF08\u5B57\u8282\uFF09\u65F6\uFF0C\u8FD8\u6709\u4E00\u4E9B\u7B97\u6CD5\u7684\u7FFB\u8BD1\uFF0C\u6570\u636E\u7684\u8F6C\u5316\uFF0C\u534F\u8BAE\u7684\u590D\u73B0\uFF0C\u90FD\u9700\u8981\u4E0D\u65AD\u7684\u4ECE\u7F51\u7EDC\u4E0A\u67E5\u9605\uFF0C\u5E76\u672A\u7CFB\u7EDF\u7684\u4ECE\u6587\u6863\u6559\u7A0B\u4E2D\u5165\u624B\u3002\u4E8E\u662F\u5199\u8FD9\u7BC7\u7684\u76EE\u7684\u5C31\u662F\u4E3A\u4E86\u52A0\u56FA\u5BF9\u4E8C\u8FDB\u5236\u6570\u636E\u7684\u7406\u89E3\uFF0C\u4EE5\u53CA JavaScript \u4E2D\u5982\u4F55\u64CD\u4F5C\u4E8C\u8FDB\u5236\u6570\u636E\u7684\u3002","date":"2022-01-24T00:00:00.000Z","tags":[{"inline":true,"label":"javascript","permalink":"/blog/tags/javascript"}],"readingTime":4.29,"hasTruncateMarker":true,"authors":[{"name":"\u6127\u600D","title":"\u5168\u6808 typescripter / \u521A\u6BD5\u4E1A\u7684\u5B66\u751F","url":"https://github.com/kuizuo","email":"[email protected]","socials":{"x":"https://x.com/kuizuo","github":"https://github.com/kuizuo"},"imageURL":"https://kuizuo.me/img/logo.png","key":"kuizuo","page":null}],"frontMatter":{"slug":"js-binary-data","title":"JavaScript\u4E2D\u7684\u4E8C\u8FDB\u5236\u6570\u636E","date":"2022-01-24T00:00:00.000Z","authors":"kuizuo","tags":["javascript"],"keywords":["javascript"]},"unlisted":false,"prevItem":{"title":"\u8BB0\u4E00\u6B21Github\u63D0\u4EA4PR\u8FC7\u7A0B","permalink":"/blog/github-pr-experience"},"nextItem":{"title":"SpringBoot\u70ED\u66F4\u65B0","permalink":"/blog/springboot-hot-update"}}')}}]);