I'm using socket.io (version 4.4.0) with mobile Safari (on iOS 15.1) and receive images as ArrayBuffers periodically (~15-30 times per second) via websocket. I want to convert these buffers to something that can be rendered on a Canvas so the first step (I think) is converting to a Blob, like below:
const socket = io(process.env.SERVER ?? "", { transports: ["websocket"] });
socket.on("connect", () => {
socket.emit("subscribe", { topic: "rgb_image" });
});
socket.on("rgb_image", (msg, ack) => {
const blob = new Blob([msg.data], { type: "image/jpeg" });
});
The problem is that after a number of iterations (~20000 but sometimes less and sometimes more) the Safari websocket crashes (I imagine it is due to memory use slowly building up but I'm not sure):
[Error] WebSocket connection to 'ws://10.0.1.2:1234/' failed: WebSocket network error: Network process crashed.
[Error] undefined
(anonymous function) (index.28bba042.js:324) [<-- this is from Parcel's HMR, which uses web-sockets]
[Error] WebSocket connection to 'ws://10.0.1.17/socket.io/?EIO=4&transport=websocket' failed: WebSocket network error: Network process crashed.
[Log] engine error – Error: websocket error (index.28bba042.js, line 15419)
Error: websocket error [<-- I'm logging engine.io "error" event]
[Log] engine close – "transport error" (index.28bba042.js, line 15416) [<-- I'm logging engine.io "close" event]
[Error] Disconnected! – "transport error" [<-- I'm logging socket.io "disconnect" event]
Now, this did not happen on iOS 14 so I'm wondering if there's anything obvious I might use to work around this problem?