Menu
Is it possible to upload image from client to server with socket.io?
983
For the WebSocket, we need to add the following: const URL = "ws://192.168.1.173:8080/ws"; var socket = new WebSocket(URL); socket. binaryType = "arraybuffer"; To make simpler the transmission, we need to set the property arraybuffer to control the data received over the WebSocket.
To send a message to the particular client, we are must provide socket.id of that client to the server and at the server side socket.io takes care of delivering that message by using, socket.broadcast.to('ID'). emit( 'send msg', {somedata : somedata_server} ); For example,user3 want to send a message to user1.
The WebSocket spec states that WebSockets should be able to send binary data as an ArrayBuffer, however this is not well supported by browsers. Socket.io limits you to sending strings, but you can send Base64 encoded data. So use the canvas toDataUrl() method to get an image as base64 and you're all set. Here's a great article on the subject.
61
I would suggest using something like File Stack https://www.filestack.com/ The user on the client can upload an image to an s3 bucket and receive a url to the image in the callback. You can then send just the url to socket.io. I have actually implemented this for a project I am doing, where a performer can upload an image, and then share it with people in the room. Basically, they upload it via filepicker, get the url, send the url via socket.io and then socket.io on the server broadcasts it to everyone in the room.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
