websocket 在 react 中使用

最新推荐文章于 2025-10-18 10:46:48 发布

原创

最新推荐文章于 2025-10-18 10:46:48 发布 · 798 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#websocket #react.js #网络协议

一、原生 WebSocket API

import React, { useEffect, useState } from "react";

const MyComponent = () => {

  const [socket, setSocket] = useState(null);

  const [message, setMessage] = useState("");

  useEffect(() => {

    const newSocket = new WebSocket("ws://localhost:8080");

    newSocket.addEventListener("open", () => {

      console.log("WebSocket连接已打开");

    });

    newSocket.addEventListener("message", (event) => {

      setMessage(event.data);

    });

    newSocket.addEventListener("close", () => {

      console.log("WebSocket连接已关闭");

    });

    newSocket.addEventListener("error", (error) => {

      console.log("WebSocket出错：", error);

    });

    setSocket(newSocket);

    return () => {

      // 组件卸载