How to display the lastmessage sent when user is not inside the chat?

by

I’ve just got same problem yesterday. But now it has been fixed. This one should works

import React, { useEffect, useState, useRef } from 'react'
import socket from 'socket.io-client'

const Chatbox = () => {
  const [chats, setChats] = useState([])
  const [message, setMessage] = useState('')
  const socketClientRef = useRef()

  useEffect(() => {
    const client = socket("http://localhost:3002");
    client.on("connect", () => {
      console.log('connected')
    })
    client.on("disconnect", () => {
      console.log('diconnected')
    });
    client.on("chat", message => {
      setChats(prevChats => [...prevChats, message])
      // INSTEAD OF:
      // setChats([...chats, message])
    });
    socketClientRef.current = client
    return () => {
      client.removeAllListeners()
    }
  }, [])

  const handleSend = async () => {
    socketClientRef.current.emit('chat', {
      room: `event-${eventId}`,
      message
    })
    setMessage('')
  }


  return (
    <div>
      <div>
        <h1>Messages</h1>
        {chats.map(chat => (
          <div>{chat}</div>
        ))}
      </div>
      <div>
        <input value={message} onChange={e => setMessage(e.target.value)} />
        <button onClick={handleSend}>Send</button>
      </div>
    </div>
  )
}

More Related Contents:

  1. How to share sessions with Socket.IO 1.x and Express 4.x?
  2. Socket.io + Node.js Cross-Origin Request Blocked
  3. socket.io and session?
  4. nginx as webserver incl. socket.io and node.js / ws:// 400 Bad Request
  5. Get the client’s IP address in socket.io
  6. Socket.IO – how do I get a list of connected sockets/clients?
  7. Which websocket library to use with Node.js? [closed]
  8. What is an example of the simplest possible Socket.io example?
  9. Authenticating socket io connections using JWT
  10. How to reuse redis connection in socket.io?
  11. npm install Error: rollbackFailedOptional
  12. socket.io rooms or namespacing?
  13. Is it possible to combine React Native with socket.io
  14. Use socket.io inside a express routes file
  15. What’s the difference between io.sockets.emit and broadcast?
  16. socket.io and express 4 sessions
  17. How do I get a list of connected sockets/clients with Socket.IO?
  18. Send custom data along with handshakeData in socket.io?
  19. Node.js client for a socket.io server
  20. How to get room’s clients list in socket.io 1.0
  21. Examples in using RedisStore in socket.io
  22. how to list rooms on socket.io nodejs server
  23. Axios (in React-native) not calling server in localhost
  24. Controlling the heartbeat timeout from the client in socket.io
  25. socket.io force a disconnect over XHR-polling
  26. Websocket transport reliability (Socket.io data loss during reconnection)
  27. Separating file server and socket.io logic in node.js
  28. Can I access a cookie from Socket.io?
  29. How to use socket.io in express routes?
  30. socket.io private message

Leave a Comment