質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

解決済

next.js×socket.jsでGET error404 の解決方法を教えてください

sgru-
sgru_

総合スコア114

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

1回答

0リアクション

0クリップ

154閲覧

投稿2022/08/13 07:29

前提

Next.jsでserver側とclient側でsocket.jsを読み込み通信を取りたいと思っていたのですが、
errorが出てしまいできませんでした
1日考えたのですがわからないのでわかる方いらっしゃれば教えていただきたいです

実現したいこと

next.jsでsocket.ioを使用する

発生している問題・エラーメッセージ

GET http://localhost:3000/socket.io?EIO=4&transport=polling&t=OAL-PqE 404 (Not Found) create @ polling.js:324 Request @ polling.js:268 request @ polling.js:220 doPoll @ polling.js:245 poll @ polling.js:111 doOpen @ polling.js:71 open @ transport.js:56 open @ socket.js:171 Socket @ socket.js:112 open @ manager.js:118 eval @ manager.js:330

該当のソースコード

server.js

import { createServer } from "http"; import { Server as socketioServer } from "socket.io"; import express from "express"; const port = process.env.PORT || 3000; const app = next({ dev }); const handle = app.getRequestHandler(); app.prepare().then(async () => { const expressApp = express(); const server = createServer(expressApp); const io = new socketioServer(); io.attach(server); io.sockets.on("connection", (socket) => { //socketの処理 }) expressApp.all("*", (req, res) => handle(req, res)); server.listen(port); })

client.js

import type { NextPage } from "next"; import io from "socket.io-client"; import { useEffect, useState } from "react"; const MAIN: NextPage = () => { const [socket, _] = useState(() => io()); socket.on("hoge",()=>{ console.log("ok"); }) return(<div>htmlが入ります</div>) } export default MAIN;

試したこと

いろいろなサイト調べてProcfileやpackage.jsを変更しました
しかし無理でした

補足情報(FW/ツールのバージョンなど)

OS:linux mint
node:v16.16.0
npm:v8.11.0
他に知りたいことや間違いがあれば教えてください

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。