无法在类型脚本中初始化WebSocket结构

1l5u6lss  于 2023-04-21  发布在  其他
关注(0)|答案(1)|浏览(282)

问题

当我运行下面的代码时,我收到以下错误。
index.tsx

import WebSocket from 'ws';

export default function Home() {
  const socket = new WebSocket('ws://localhost:1919/ws');
  
  return (
    <div>Home</div>
  );
}

误差

Unhandled Runtime Error

Error: ws does not work in the browser. Browser clients must use the native WebSocket object

重现错误的条件

  • 初始化项目
yarn create next-app

所有选项均被选为默认值。

  • 添加ws
yarn add ws
yarn add @types/node @types/ws
8hhllhi2

8hhllhi21#

ws中的WebSocket不是为浏览器设计的,所以你不能使用它。相反,你需要使用浏览器原生的WebSocket,并确保在客户端使用useEffect,就像这样:

import { useEffect } from "react";

export default function Home() {
  
  useEffect(() =>
  {
    const socket = new WebSocket('ws://localhost:1919/ws');
  }, [])

  return (
      <div>Home</div>
  )
}

相关问题