nuxt3使用websocket-Go服务器开发

Nuxt.js 是一个基于 Vue.js 的通用应用框架，提供了一些有用的功能和约定来帮助我们开发 SPA 和 SSR 应用。在 Nuxt.js 中使用 WebSocket，可以通过以下步骤进行：

安装 ws 模块

npm install ws

在 nuxt.config.js 中添加服务器端代码

const WebSocket = require('ws')
export default {
  server: {
    // 在服务器启动时创建 WebSocket 服务
    port: 3000,
    host: '0.0.0.0',
    https: false,
    websocket: true
  },
  // 启用 Websocket 功能
  plugins: [
    { src: '~/plugins/websocket', ssr: false }
  ]
}

创建 websocket 插件

在 /plugins 目录下创建一个名为 websocket.js 的文件，并添加以下代码：

import WebSocket from 'ws'
export default (context, inject) => {
  const socket = new WebSocket.Server({ port: process.env.WS_PORT || 8080 })
  socket.on('connection', (client) => {
    console.log('Client connected!')
    client.on('message', (data) => {
      console.log(`Received message ${data} from client`)
      client.send(`You said "${data}"`)
    })
    client.on('close', () => {
      console.log('Client disconnected!')
    })
  })
  // 注入 websocket 实例到 context 上下文中
  inject('websocket', socket)
}

在页面中使用

现在，在任何页面中都可以使用 $websocket 访问 WebSocket 实例，例如：

export default {
  async mounted() {
    const ws = this.$websocket
    ws.on('open', () => {
      console.log('WebSocket connection established!')
      ws.send('Hello, server!')
    })
    ws.on('message', (data) => {
      console.log(`Received message "${data}" from server`)
    })
    ws.on('close', () => {
      console.log('WebSocket connection closed!')
    })
  }
}