Nuxt•4w ago

give me a simple example of socket io in nuxt3 js

6 Replies

Hi @Hùng Lê. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'd be happy to provide information about using WebSockets in Nuxt 3, but I should note that the knowledge sources specifically show examples using Nitro's built-in WebSocket support rather than Socket.IO specifically. Nitro is Nuxt's server engine, and it has native WebSocket capabilities. Here's a simple example of implementing WebSockets in Nuxt 3 using Nitro's WebSocket support: Server-side implementation Create a WebSocket handler in your server directory:

// server/websocket.ts
import { defineWebSocketHandler } from 'h3'

export default defineWebSocketHandler({
  open(peer) {
    // When a client connects
    peer.send({ user: "server", message: `Welcome ${peer}!` })
    peer.publish("chat", { user: "server", message: `${peer} joined!` })
    peer.subscribe("chat")
  },
  message(peer, message) {
    // When a message is received
    if (message.text().includes("ping")) {
      peer.send({ user: "server", message: "pong" })
    } else {
      const msg = {
        user: peer.toString(),
        message: message.toString(),
      }
      peer.send(msg) // echo back to sender
      peer.publish("chat", msg) // publish to all subscribers
    }
  },
  close(peer) {
    // When a client disconnects
    peer.publish("chat", { user: "server", message: `${peer} left!` })
  }
})

// server/websocket.ts
import { defineWebSocketHandler } from 'h3'

export default defineWebSocketHandler({
  open(peer) {
    // When a client connects
    peer.send({ user: "server", message: `Welcome ${peer}!` })
    peer.publish("chat", { user: "server", message: `${peer} joined!` })
    peer.subscribe("chat")
  },
  message(peer, message) {
    // When a message is received
    if (message.text().includes("ping")) {
      peer.send({ user: "server", message: "pong" })
    } else {
      const msg = {
        user: peer.toString(),
        message: message.toString(),
      }
      peer.send(msg) // echo back to sender
      peer.publish("chat", msg) // publish to all subscribers
    }
  },
  close(peer) {
    // When a client disconnects
    peer.publish("chat", { user: "server", message: `${peer} left!` })
  }
})

Client-side implementation You can use the WebSocket API in your Vue components:

<script setup>
const socket = ref(null)
const messages = ref([])

onMounted(() => {
  // Connect to the WebSocket endpoint
  socket.value = new WebSocket(`ws://${window.location.host}/_ws`)
  
  // Handle incoming messages
  socket.value.onmessage = (event) => {
    const data = JSON.parse(event.data)
    messages.value.push(data)
  }
})
function sendMessage(text) {
  if (socket.value && socket.value.readyState === WebSocket.OPEN) {
    socket.value.send(text)
  }
}

onBeforeUnmount(() => {
  // Close the connection when component is unmounted
  if (socket.value) {
    socket.value.close()
  }
})
</script>

<template>
  <div>
    <div v-for="(msg, index) in messages" :key="index">
      <strong>{{ msg.user }}:</strong> {{ msg.message }}
    </div>
    <input @keyup.enter="sendMessage($event.target.value); $event.target.value = ''" placeholder="Type a message..." />
  </div>
</template>

<script setup>
const socket = ref(null)
const messages = ref([])

onMounted(() => {
  // Connect to the WebSocket endpoint
  socket.value = new WebSocket(`ws://${window.location.host}/_ws`)
  
  // Handle incoming messages
  socket.value.onmessage = (event) => {
    const data = JSON.parse(event.data)
    messages.value.push(data)
  }
})
function sendMessage(text) {
  if (socket.value && socket.value.readyState === WebSocket.OPEN) {
    socket.value.send(text)
  }
}

onBeforeUnmount(() => {
  // Close the connection when component is unmounted
  if (socket.value) {
    socket.value.close()
  }
})
</script>

<template>
  <div>
    <div v-for="(msg, index) in messages" :key="index">
      <strong>{{ msg.user }}:</strong> {{ msg.message }}
    </div>
    <input @keyup.enter="sendMessage($event.target.value); $event.target.value = ''" placeholder="Type a message..." />
  </div>
</template>

This example is based on the WebSocket support that was introduced in Nitro 2.9 and is available in Nuxt 3. For more detailed information, you can check out the WebSocket guide in H3 documentation. If you specifically need Socket.IO instead of the native WebSocket implementation, you would need to install the Socket.IO client and server packages and implement them separately, but that's not covered in the provided knowledge sources. YouTube [Nuxt 3]: Integrating WebSockets in Nuxt and Nitro provides a video tutorial on this topic if you need more visual guidance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@395818224114991104> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Hùng LêOP•4w ago

ws in template not imported?

kogratte•3w ago

@kapa.ai could you please rewrite this in a composable way?

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To rewrite the WebSocket implementation in a composable way, you can create a composable function that encapsulates the WebSocket logic. This allows you to reuse the WebSocket connection logic across different components in your Nuxt 3 application. Here's how you can do it: Create a Composable Create a composable file, for example, useWebSocket.js, in your composables directory:

// composables/useWebSocket.js
import { ref, onMounted, onBeforeUnmount } from 'vue'

export function useWebSocket(url) {
  const socket = ref(null)
  const messages = ref([])

  onMounted(() => {
    // Connect to the WebSocket endpoint
    socket.value = new WebSocket(url)
    
    // Handle incoming messages
    socket.value.onmessage = (event) => {
      const data = JSON.parse(event.data)
      messages.value.push(data)
    }
  })

  function sendMessage(text) {
    if (socket.value && socket.value.readyState === WebSocket.OPEN) {
      socket.value.send(text)
    }
  }

  onBeforeUnmount(() => {
    // Close the connection when component is unmounted
    if (socket.value) {
      socket.value.close()
    }
  })

  return {
    socket,
    messages,
    sendMessage
  }
}

// composables/useWebSocket.js
import { ref, onMounted, onBeforeUnmount } from 'vue'

export function useWebSocket(url) {
  const socket = ref(null)
  const messages = ref([])

  onMounted(() => {
    // Connect to the WebSocket endpoint
    socket.value = new WebSocket(url)
    
    // Handle incoming messages
    socket.value.onmessage = (event) => {
      const data = JSON.parse(event.data)
      messages.value.push(data)
    }
  })

  function sendMessage(text) {
    if (socket.value && socket.value.readyState === WebSocket.OPEN) {
      socket.value.send(text)
    }
  }

  onBeforeUnmount(() => {
    // Close the connection when component is unmounted
    if (socket.value) {
      socket.value.close()
    }
  })

  return {
    socket,
    messages,
    sendMessage
  }
}

Use the Composable in a Component Now, you can use this composable in any component to manage WebSocket connections:

<script setup>
import { useWebSocket } from '~/composables/useWebSocket'

const { messages, sendMessage } = useWebSocket(`ws://${window.location.host}/_ws`)
</script>

<template>
  <div>
    <div v-for="(msg, index) in messages" :key="index">
      <strong>{{ msg.user }}:</strong> {{ msg.message }}
    </div>
    <input @keyup.enter="sendMessage($event.target.value); $event.target.value = ''" placeholder="Type a message..." />
  </div>
</template>

<script setup>
import { useWebSocket } from '~/composables/useWebSocket'

const { messages, sendMessage } = useWebSocket(`ws://${window.location.host}/_ws`)
</script>

<template>
  <div>
    <div v-for="(msg, index) in messages" :key="index">
      <strong>{{ msg.user }}:</strong> {{ msg.message }}
    </div>
    <input @keyup.enter="sendMessage($event.target.value); $event.target.value = ''" placeholder="Type a message..." />
  </div>
</template>

This approach encapsulates the WebSocket logic in a composable, making it easy to manage and reuse across different parts of your application. You can adjust the useWebSocket composable to include additional functionality or handle more complex WebSocket interactions as needed. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@639111892144619539> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

give me a simple example of socket io in nuxt3 js

Did you find this page helpful?