升级socket.io到next.js 13.4时出错
这是我以前的server.js代码
import { Server } from "socket.io";
export default function SocketHandler(req, res) {
if (res.socket.server.io) {
console.log("Already set up");
res.end();
return;
}
const io = new Server(res.socket.server);
res.socket.server.io = io;
io.on("connection", (socket) => {
socket.on("send-message", (obj) => {
io.emit("receive-message", obj);
});
});
console.log("Setting up socket");
res.end();
}
这是我的client.js代码
import React, { useEffect, useState } from "react";
import io from "socket.io-client";
let socket;
const Home = () => {
const [message, setMessage] = useState("");
const [username, setUsername] = useState("");
const [allMessages, setAllMessages] = useState([]);
useEffect(() => {
socketInitializer();
return () => {
socket.disconnect();
};
}, []);
async function socketInitializer() {
await fetch("/api/socket");
socket = io();
socket.on("receive-message", (data) => {
setAllMessages((pre) => [...pre, data]);
});
}
function handleSubmit(e) {
e.preventDefault();
console.log("emitted");
socket.emit("send-message", {
username,
message
});
setMessage("");
}
return (
<div>
<h1>Chat app</h1>
<h1>Enter a username</h1>
<input value={username} onChange={(e) => setUsername(e.target.value)} />
<br />
<br />
<div>
{allMessages.map(({ username, message }, index) => (
<div key={index}>
{username}: {message}
</div>
))}
<br />
<form onSubmit={handleSubmit}>
<input
name="message"
placeholder="enter your message"
value={message}
onChange={(e) => setMessage(e.target.value)}
autoComplete={"off"}
/>
</form>
</div>
</div>
);
};
export default Home;
现在我正在尝试学习13. 4中的typescript和next js app router。
我只能将我的client.js转换为client.tsx,但在将server.js转换为server/route. ts时出错。我不能像在老的next js中那样使用函数。我得用
export default function POST {}
这种类型的功能。我需要一个帮助将其转换为typescript +使其与新的最新的下一个js工作。
抱歉我英语不好
1条答案
按热度按时间lymnna711#
下一个13.4 API路由
当转换为typescript时,您的API路由应该看起来像这样:
您将对任何其他处理程序使用相同的格式。希望这能帮上忙。