websocket 下一个js 13.4 socket.io升级

7fyelxc5  于 2023-06-06  发布在  其他
关注(0)|答案(1)|浏览(206)

升级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工作。

抱歉我英语不好

lymnna71

lymnna711#

下一个13.4 API路由

当转换为typescript时,您的API路由应该看起来像这样:

import { NextResponse } from 'next/server';

export async function POST(req: Request) {
    const { data } = await req.json();

    /*
        Do something here
    */

    return NextResponse.json({message: "Hello World"})
}

您将对任何其他处理程序使用相同的格式。希望这能帮上忙。

相关问题