react-use-websocket 如何打开 websocket 连接？答案

【问题标题】：react-use-websocket How to open a websocket connection?react-use-websocket 如何打开 websocket 连接？
【发布时间】：2021-11-05 08:04:45
【问题描述】：

我正在尝试打开一个 websocket 连接，我正在使用 react-use-websocket 库，一切看起来都很好，但是当我启动应用程序时，我在尝试打开 websocket 后在控制台中看到一个错误。我认为问题在于认证，但阅读文档我不确定是否可以在配置选项中添加认证。

React 组件代码：

import { useSocketIO } from 'react-use-websocket';

.
.
.

type Props = ExportDataProps & LinkDispatchProps & LinkStateProps;

 const ExportData: React.FC<Props> = (props) => {
  const [socketUrl, setSocketUrl] = useState('ws://apiws.dev.managementsystem.com/ws')
  const [showActionSheet, setShowActionSheet] = useState(false);
  const [popoverEvent, setPopoverEvent] = useState();

    const {
     lastMessage,
    } = useSocketIO(socketUrl);

.
.
.

应用程序错误：

react-use-websocket 库： react-use-websocket

后端 Nestjs 代码：

import { WebSocketGateway, WebSocketServer } from '@nestjs/websockets';

@WebSocketGateway(3002, { path: '/ws'})
@Injectable()
export class ExportDataService {
    @WebSocketServer() server;

路径：“/ws”应该是“/wss”？？？

你有什么想法吗？谢谢！

【问题讨论】：

如果将套接字 url 更改为 wss://apiws.dev...

标签： reactjs websocket nestjs

【解决方案1】：

错误消息指出 websocket 连接是 insecure，因为它是在没有 SSL/TLS 的情况下加载的 - 而页面本身使用 https.

因此，只需将'ws://apiws.dev.managementsystem.com/ws' 更改为'wss://apiws.dev.managementsystem.com/ws'。

【讨论】：

我现在试试
@YoungAlCapone 好的 - 让我知道它是否有效 :)
现在出现一个新错误“WebSocket connection to WebSocket connection to 'wss://”
@YoungAlCapone 你能写出整个错误信息吗？
WebSocket 连接到 'wss://apiws.dev.managementsystem.com/ws/socket.io/?EIO=3&transport=websocket' 失败：t.createOrJoinSocket @ create-or-join.ts :99

【解决方案2】：

错误自行解释：
Mixed contents 表示您的页面同时存在安全 (https) 和不安全 (http) 请求。

仅出于开发目的，您可以在 http 中公开您的网站并使用 ws:// 连接到 websocket。

在生产中，您绝对应该使用安全连接（https:// 和 wss://）

【讨论】：