websocket 在 react 中使用

最新推荐文章于 2025-05-08 11:30:46 发布

yqcoder

最新推荐文章于 2025-05-08 11:30:46 发布

阅读量686

点赞数 6

分类专栏：面试题文章标签： websocket react.js 网络协议

本文链接：https://blog.youkuaiyun.com/weixin_64684095/article/details/144655193

版权

面试题专栏收录该内容

59 篇文章

订阅专栏

一、原生 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 () => {

      // 组件卸载时关闭WebSocket连接

      if (newSocket) {

        newSocket.close();

      }

    };

  }, []);

  const sendMessage = () => {

    if (socket) {

      socket.send("你好，服务器！");

    }

  };

  return (

    <div>

      <p>收到的消息：{message}</p>

      <button onClick={sendMessage}>发送消息</button>

    </div>

  );

};

export default MyComponent;