1"use strict";(self.webpackChunksample_website=self.webpackChunksample_website||[]).push([[2626],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>d});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=r.createContext({}),s=function(e){var t=r.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},c=function(e){var t=s(e.components);return r.createElement(p.Provider,{value:t},e.children)},u="mdxType",f={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,p=e.parentName,c=i(e,["components","mdxType","originalType","parentName"]),u=s(n),m=a,d=u["".concat(p,".").concat(m)]||u[m]||f[m]||o;return n?r.createElement(d,l(l({ref:t},c),{},{components:n})):r.createElement(d,l({ref:t},c))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,l=new Array(o);l[0]=m;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i[u]="string"==typeof e?e:a,l[1]=i;for(var s=2;s<o;s++)l[s]=n[s];return r.createElement.apply(null,l)}return r.createElement.apply(null,n)}m.displayName="MDXCreateElement"},8961:(e,t,n)=>{n.r(t),n.d(t,{contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>i,toc:()=>p});var r=n(3117),a=(n(7294),n(3905));const o={title:"How to upload a file"},l="How to upload a file",i={type:"mdx",permalink:"/how-to/upload-a-file",source:"@site/src/pages/how-to/upload-a-file.md",title:"How to upload a file",description:"Files can be sent as is:",frontMatter:{title:"How to upload a file"}},p=[{value:"Additional notes",id:"additional-notes",level:2},{value:"<code>maxHttpBufferSize</code> limit",id:"maxhttpbuffersize-limit",level:3},{value:"Over the wire",id:"over-the-wire",level:3}],s={toc:p},c="wrapper";
1function u(e){let{components:t,...n}=e;return(0,a.kt)(c,(0,r.Z)({},s,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"how-to-upload-a-file"},"How to upload a file"),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/API/File"},"Files")," can be sent as is:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-html"},'<!doctype html>\n<html lang="en">\n <body>\n <input type="file" onchange="upload(this.files)" />\n\n <script src="/path/to/socket.io.js"><\/script>\n <script>\n const socket = io();\n\n function upload(files) {\n socket.emit("upload", files[0], (status) => {\n console.log(status);\n });\n }\n <\/script>\n </body>\n</html>\n')),(0,a.kt)("p",null,"The file will be received as a ",(0,a.kt)("a",{parentName:"p",href:"https://nodejs.org/api/buffer.html"},"Buffer")," on the server side:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'import { writeFile } from "fs";\n\nio.on("connection", (socket) => {\n socket.on("upload", (file, callback) => {\n console.log(file); // <Buffer 25 50 44 ...>\n\n // save the content to the disk, for example\n writeFile("/tmp/upload", file, (err) => {\n callback({ message: err ? "failure" : "success" });\n });\n });\n});\n')),(0,a.kt)("h2",{id:"additional-notes"},"Additional notes"),(0,a.kt)("h3",{id:"maxhttpbuffersize-limit"},(0,a.kt)("inlineCode",{parentName:"h3"},"maxHttpBufferSize")," limit"),(0,a.kt)("p",null,"While uploading a file, you might reach the ",(0,a.kt)("inlineCode",{parentName:"p"},"maxHttpBufferSize")," value, which is the maximum allowed message size in bytes. It defaults to 1 MB."),(0,a.kt)("p",null,"You can increase this value, according to your use case:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'import { Server } from "socket.io";\n\nconst io = new Server({\n maxHttpBufferSize: 1e8 // 100 MB\n});\n')),(0,a.kt)("p",null,"Reference: ",(0,a.kt)("a",{parentName:"p",href:"/docs/v4/server-options/#maxhttpbuffersize"},(0,a.kt)("inlineCode",{parentName:"a"},"maxHttpBufferSize")," option")),(0,a.kt)("h3",{id:"over-the-wire"},"Over the wire"),(0,a.kt)("p",null,"Like other binary structures (",(0,a.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer"},"ArrayBuffer"),", ",(0,a.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/API/Blob"},"Blob"),"), the arguments of the ",(0,a.kt)("inlineCode",{parentName:"p"},"emit()")," method will be sent as two WebSocket frames over the wire:"),(0,a.kt)("p",null,"First, a text frame:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre"},'451-["upload",{"_placeholder":true,"num":0}]\n||||\u2514\u2500 JSON-encoded payload with placeholders for binary attachments\n||||\n|||\u2514\u2500 separator\n||\u2514\u2500 number of binary attachments\n|\u2514\u2500 socket.io BINARY EVENT packet type\n\u2514\u2500 engine.io MESSAGE packet type\n')),(0,a.kt)("p",null,"And then a binary frame (one per binary structure):"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre"},"<0x25 0x50 0x44 ...>\n")),(0,a.kt)("p",null,"Depending on your use case, you may change this behavior by using a ",(0,a.kt)("a",{parentName:"p",href:"/docs/v4/custom-parser/"},"custom parser"),"."))}u.isMDXComponent=!0}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.