如何通过 Websocket 消息发送换行命令？

Question

设置

• Python FastApi 后端服务器
• JS React 前端客户端
• react-use-websocket 用于前端 ws 客户端

问题

所以我需要通过 Websocket 连接从后端 API 向前端客户端发送一些消息，并将这些消息显示给用户。但是，在显示这些消息时，我不知道如何转义到新行。我尝试在 Websocket 消息中发送 \n 。 JS 不显示此 \n 字符，但也不会切换到换行符。它只是忽略它。还尝试发送一些空格，但这也无济于事。无论我在 API 端留下多少空格，它都只显示一个空格。

代码

注意：TextTransition 组件来自 react-text-transition 但 行为与标准 html 段落相同。

const {lastJsonMessage} = useWebSocket(socketURL);

//...

return (
    <div>
    ...
        ...
        <div style={boxStyle}>
            <h1 style={{cursor: "default"}}>Message</h1>
            <p style={{cursor: "default"}}>━━━━━━━━━━━━━━━━━</p>
            <TextTransition
                text={lastJsonMessage ? lastJsonMessage.message : ""}
                style={{cursor: "default"}}
                springConfig={ presets.stiff }
            />
        </div>
        ...
    ...
    </div>
)

我能做什么，应该做什么？提前致谢。

Answer 1

\n 不会在 HTML 中产生新行。您要么需要发送<br/>，要么将客户端的\n 替换为，例如：

<TextTransition
  text={lastJsonMessage ? lastJsonMessage.message.replace(/\n/g, '<br/>') : ""}
  style={{cursor: "default"}}
  springConfig={ presets.stiff }
  />

这假定 TextTransition 接受 HTML（不仅仅是文本）。如果是后者，那么您可能不走运，因为该组件不允许您在文本中设置控制字符。