如何为 AdonisJs v6 配置 socket.io

AdonisJS 是适用于 Node.js 的全功能网络框架，深受流行的 PHP 网络框架 Laravel 的影响。

虽然 AdonisJs 提供了许多现成可用的功能和集成，但自从新版本 6 发布以来，许多东西都发生了变化，要集成我们最喜欢的一些 librairies（如用于实时通信的 socket.io）似乎有些困难。本文将分享 socket.io 与 AdonisJS v6 的集成。

首先，需要在 adonisJs 应用程序中安装 socket.io

npm install socket.io

然后为 socket.io 创建一个预加载文件。

node ace make:preload ws --register

这样就可以在启动程序时导入我们的文件。打开 start/ws.ts 文件，并在其中写入以下代码：

import app from '@adonisjs/core/services/app'
import { Server } from 'socket.io'
import server from '@adonisjs/core/services/server'

app.ready(() => {
  const io = new Server(server.getNodeServer(), {
    cors: {
      origin: '*',
    },
  })
  io?.on('connection', (socket) => {
    console.log('A new connection', socket.id)
  })
})

在此，我们创建一个新的 socket.io，与 adonisJs 节点服务器一起运行，并确保启用 CORS（我只是为所有 incoms 启用了 cors，但在生产中从未使用过 !!!!）。

这部分将允许您监听新连接：

io?.on('connection', (socket) => {
    console.log(socket.id)
  })

要测试它，您可以从客户端连接，以下是在 react 中测试连接的简单代码。要了解有关 react 和 socket.io 的更多信息，请访问 https://socket.io/how-to/use-with-react。

import { useEffect } from 'react';
import { io } from 'socket.io-client';
function App() {
  useEffect(() => {
    // Establish WebSocket connection to your backend
    const socket = io('http://localhost:3333');

    // Clean up the WebSocket connection on component unmount
    return () => {
        socket.disconnect();
    };
}, []);
  return (
    <div className="App">
      Let's configure socket.io for AdonisJS.
    </div>
  );
}

export default App;

运行客户端后，您将在 adonisJS 控制台中看到以下内容：

可以看到正在运行….，但还可以做得更好。

你肯定希望能在应用程序的不同部分发送一些消息，而无需总是启动一个新的 io 服务器，我们要做的就是将其封装在一个服务中。

创建一个服务类，负责启动 socketio 服务器并为我们提供一个引用。服务的代码可以放在代码库的任何地方，这里在 ./app/services 目录中创建。

如果遗漏，您需要将其添加到 package.json 和 tsconfig.json（路径 – 导入）中。

 "#ressources/*" :  "./app/ressources/*.js" ,

然后创建 ./app/services/Ws.ts 并添加以下代码：

import { Server } from 'socket.io'
import server from '@adonisjs/core/services/server'
class Ws {
  io: Server | undefined
  private booted = false

  boot() {
    /**
     * Ignore multiple calls to the boot method
     */
    if (this.booted) {
      return
    }

    this.booted = true
    this.io = new Server(server.getNodeServer(), {
      cors: {
        origin: '*',
      },
    })
  }
}

export default new Ws()

更新之前的start/ws.ts file as

import app from '@adonisjs/core/services/app'
import Ws from '#services/Ws'
app.ready(() => {
  Ws.boot()
  const io = Ws.io
  io?.on('connection', (socket) => {
    console.log(socket.id)
  })
})

现在，可以在任何地方使用 Ws.io。

在本例中，我们将在 /pong 路由上发出一个事件，然后稍等片刻，再使用 socket.io 发出响应。

发送 socket.io 消息：

Ws.io?.emit('ping', { message: 'pong send by adonisJS' })

//Just an event to test if works
emitter.on('send-io-message', async (data) => {
  console.log('Event received:', data)

  // Set a timeout of 5 seconds
  const timeout = 5000

  // Execute some asynchronous task
  try {
    // Simulate a delay with a promise
    await new Promise((resolve) => setTimeout(resolve, timeout))
    Ws.io?.emit('ping', { message: 'pong send by adonisJS' })
    console.log('Asynchronous task completed')
  } catch (error) {
    console.error('Error:', error.message)
  }
})

//call the event in the desire soute
emitter.emit('send-io-message', {})

要测试的 react 代码：

 useEffect(() => {
    fetchData();
    // Establish WebSocket connection to your backend
    const socket = io('http://localhost:3333');

    //listen to ping sent by socket.io
    socket.on('ping',(data)=>{
      console.log(data)
    })

    // Clean up the WebSocket connection on component unmount
    return () => {
        socket.disconnect();
    };
}, []);

接下来将在浏览器的开发工具控制台中看到这一点: