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

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

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

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

Socket.IO

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

Q&A

解決済

1回答

1142閲覧

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

sgru-

総合スコア133

Next.js

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

Socket.IO

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

0グッド

0クリップ

投稿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

1import { createServer } from "http"; 2import { Server as socketioServer } from "socket.io"; 3import express from "express"; 4const port = process.env.PORT || 3000; 5const app = next({ dev }); 6const handle = app.getRequestHandler(); 7app.prepare().then(async () => { 8 const expressApp = express(); 9 const server = createServer(expressApp); 10 const io = new socketioServer(); 11 io.attach(server); 12 io.sockets.on("connection", (socket) => { 13 //socketの処理 14 }) 15 expressApp.all("*", (req, res) => handle(req, res)); 16 server.listen(port); 17})

client.js

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

試したこと

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

解決できました
package.jsonのscriptsをこのようにしたら動きました

json

1 "scripts": { 2 "dev": "NODE_ENV=production;env-cmd -f .env.local node server.mjs", 3 "build": "next build", 4 "start": "NODE_ENV=production;env-cmd -f .env.staging node server.mjs", 5 "heroku-postbuild": "npm run build", 6 "test": "echo \"Error: no test specified\" && exit 1" 7 },

投稿2022/08/13 14:13

sgru-

総合スコア133

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問