web-dev-qa-db-ja.com

next.js APIルートを使用してsocket.ioを使用する方法

Next.jsは Serverless API Routes 。 ./pages/apiの下にファイルを作成することで、サービスを実行することができます。このメカニズムを使用してSocket.IOサービスを実行します。

クライアントを作成しました。

./pages/client.js

import { useEffect } from 'react';
import io from 'socket.io-client';

export default () => {

  useEffect(() => {
    io('http://localhost:3000', { path: '/api/filename' });
  }, []);

  return <h1>Socket.io</h1>;
}

そしてAPIルート：

./pages/api/filename.js

const io = require('socket.io')({ path: '/api/filename' });

io.onconnection = () => {
  console.log('onconnection');
}

io.on('connect', () => {
  console.log('connect');
})

io.on('connection', () => {
  console.log('connection');
})

export default (req, res) => {
  console.log('endpoint');
}

しかし、私はクライアントがsocket.ioサーバーに接続することができず、'onconnection'、'connect'、または'connection'が印刷されます。

socket.ionext.js
13
Aurelius

フロントエンドのプッシャーで認証するために/api/pusher/authを持つ必要があります。それからあなたはそれから得られる鍵を使ってプッシャーと通信します。セキュリティ上の目的のためです。あなたはすべてのフロントエンドを通してそれを実行することができますが、あなたがデータを保存している（メッセージやチャットなど）、あなたのアプリによってはそれから認証されるべきです。

1
Alex Cory