Socket io, broadcasting images in a chat app without saving them to a directory on the server-CodePudding

I'm creating a chat app with socket.io, i need to know, how i can broadcast images as a user to other users in the "chat room" without the need to first save the picture in a directory. The main goal is to open the image from a "file input" and be able to send the file ('picture') to other users so they can view It in the chat

CodePudding user response：

Fundamentally, use FileReader to load the file as a Buffer, then send it. When receiving an image, put its blob into createObjectURL and create an image tag.

Basic Example (View Sandbox)

<input type="file" id="img" onchange="setImgSrc(this)" accept="image/*" />
<input type="submit" onclick="submitImg()" />
<div></div>
<!-- OUTPUT DIV -->
<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect()

  var src

  var setImgSrc = (elm) => {
    var fr = new FileReader()
    fr.onload = () => (src = fr.result)
    fr.readAsArrayBuffer(elm.files[0])
  }

  var submitImg = () => socket.emit('submitImg', src)

  socket.on('sentImg', (src) => {
    // Create Img...
    var img = document.createElement('img')
    img.src = (window.URL || window.webkitURL).createObjectURL(
      new Blob([src], {
        type: 'image/png'
      })
    )
    img.width = 200
    img.height = 200
    document.querySelector('div').append(img)
  })
</script>

const express = require('express')
const app = express()
const http = require('http').Server(app)
app.use(express.static('src/client'))
const io = require('socket.io')(http)

io.on('connection', (socket) => {
  console.log('Client connected')

  socket.on('submitImg', (src) => {
    console.log('Client sent image')

    //Client submit an image
    io.emit('sentImg', src) //the server send the image src to all clients
  })
})

const port = 8080
http.listen(port, () => {
  console.log('Server Running on Port '   port)
})