[已解决]给你一个聊天服务器，如何连入创建聊天室？

真的只会一点点

function getMessage() {    var res = null;    var ajax = new XMLHttpRequest();    ajax.open('get', 'http://loriame.cn:5000/ailab/getMessages', false);    ajax.send();    if (ajax.readyState == 4 && ajax.status == 200) {       res =
         JSON.parse(ajax.responseText);    }    return res;}
         // 获取全部留言数据
         function getAllMessage() {    var res = null;    var ajax = new XMLHttpRequest();    ajax.open('get', 'http://loriame.cn:5000/ailab/getAllMessage', false);    ajax.send();    if (ajax.readyState == 4 && ajax.status == 200) {       res = JSON.parse(ajax.responseText);    }    return res;}
         // 发送一条留言
         function sendMessage(name, message) {    var res = null;    var ajax = new XMLHttpRequest();    ajax.open('post', 'http://loriame.cn:5000/ailab/sendMessage', false);    ajax.setRequestHeader("Content-Type", 'application/json');  
         //设置请求头   
         ajax.send(JSON.stringify({name, message}));    if (ajax.readyState == 4 && ajax.status == 200) {       res = JSON.parse(ajax.responseText);    }   
           return res;}
           var backTime = getMessage();
           console.log(backTime);
           var backTimeMessage = getMessage();
           console.log(backTimeMessage);




   大佬们走过路过不要弃之不理啊!!!

最佳答案

月排行榜 / 总排行榜

不二如是

2023-7-22 08:54:06

可以使用 Create React App 来初始化 Reac t应用程序，并使用 yarn 来管理依赖。

在初始化应用程序后使用：

• Ant Design的List组件来显示聊天消息
• Redux Toolkit来管理状态
• createSlice创建Redux的reducer和action
• thunk来处理异步操作
• axios库发送和接收数据
  

以下是代码示例：

首先，确保已经安装了Create React App和yarn。然后，在终端中执行以下命令：

npx create-react-app chat-app
cd chat-app
yarn add antd redux react-redux @reduxjs/toolkit axios

然后，将 "src/App.js" 文件的内容替换为以下代码：

import React, { useEffect } from 'react';
import { List } from 'antd';
import { useSelector, useDispatch } from 'react-redux';
import { createSlice, configureStore, createAsyncThunk, createAction } from '@reduxjs/toolkit';
import axios from 'axios';

const initialState = {
  messages: [],
  loading: false,
  error: null,
};

const chatSlice = createSlice({
  name: 'chat',
  initialState,
  reducers: {
    addMessage: (state, action) => {
      state.messages.push(action.payload);
    },
    setLoading: (state, action) => {
      state.loading = action.payload;
    },
    setError: (state, action) => {
      state.error = action.payload;
    },
  },
});

export const { addMessage, setLoading, setError } = chatSlice.actions;

export const fetchMessages = createAsyncThunk('chat/fetchMessages', async () => {
  try {
    const response = await axios.get('http://loriame.cn:5000/ailab/getMessages');
    return response.data;
  } catch (error) {
    throw Error('Failed to fetch messages');
  }
});

export const sendMessage = createAsyncThunk('chat/sendMessage', async (message) => {
  try {
    const response = await axios.post('http://loriame.cn:5000/ailab/sendMessage', message, {
      headers: { 'Content-Type': 'application/json' },
    });
    return response.data;
  } catch (error) {
    throw Error('Failed to send message');
  }
});

const reducer = chatSlice.reducer;

const store = configureStore({
  reducer,
});

const ChatApp = () => {
  const dispatch = useDispatch();
  const messages = useSelector((state) => state.messages);
  const loading = useSelector((state) => state.loading);
  const error = useSelector((state) => state.error);

  useEffect(() => {
    dispatch(fetchMessages());
  }, [dispatch]);

  const handleSendMessage = (name, message) => {
    dispatch(setLoading(true));
    dispatch(setError(null));

    dispatch(
      sendMessage({ name, message })
    ).unwrap()
      .then(() => {
        dispatch(fetchMessages());
      })
      .catch((error) => {
        dispatch(setError(error.message));
      })
      .finally(() => {
        dispatch(setLoading(false));
      });
  };

  return (
    <div>
      {loading && <div>Loading...</div>}
      {error && <div>Error: {error}</div>}
      <List
        dataSource={messages}
        renderItem={({ name, message }) => (
          <List.Item>
            <List.Item.Meta title={name} description={message} />
          </List.Item>
        )}
      />
    </div>
  );
};

const App = () => {
  return (
    <Provider store={store}>
      <ChatApp />
    </Provider>
  );
};

export default App;

我们首先定义了初始状态、Redux的reducer和action，以及异步操作thunk。

在ChatApp组件中，我们使用useSelector和useDispatch来获取Redux store中的状态和派发action。在组件的useEffect钩子函数中，我们调用fetchMessages来获取聊天消息。当发送消息时，我们调用sendMessage来异步发送消息，并更新聊天消息。

最后，我们将应用程序包装在Provider组件中，以便Redux store能够在整个应用程序中共享。

跳转到最佳答案楼层

Dear黑色

老哥，发代码的时候用代码格式，这样看着真的头疼，没有看全，但是我觉得做聊天室，应该是即时通讯，应该是用  socket实现，而不是ajax

不二如是

可以使用 Create React App 来初始化 Reac t应用程序，并使用 yarn 来管理依赖。

在初始化应用程序后使用：

• Ant Design的List组件来显示聊天消息
• Redux Toolkit来管理状态
• createSlice创建Redux的reducer和action
• thunk来处理异步操作
• axios库发送和接收数据
  

以下是代码示例：

首先，确保已经安装了Create React App和yarn。然后，在终端中执行以下命令：

npx create-react-app chat-app
cd chat-app
yarn add antd redux react-redux @reduxjs/toolkit axios

然后，将 "src/App.js" 文件的内容替换为以下代码：

import React, { useEffect } from 'react';
import { List } from 'antd';
import { useSelector, useDispatch } from 'react-redux';
import { createSlice, configureStore, createAsyncThunk, createAction } from '@reduxjs/toolkit';
import axios from 'axios';

const initialState = {
  messages: [],
  loading: false,
  error: null,
};

const chatSlice = createSlice({
  name: 'chat',
  initialState,
  reducers: {
    addMessage: (state, action) => {
      state.messages.push(action.payload);
    },
    setLoading: (state, action) => {
      state.loading = action.payload;
    },
    setError: (state, action) => {
      state.error = action.payload;
    },
  },
});

export const { addMessage, setLoading, setError } = chatSlice.actions;

export const fetchMessages = createAsyncThunk('chat/fetchMessages', async () => {
  try {
    const response = await axios.get('http://loriame.cn:5000/ailab/getMessages');
    return response.data;
  } catch (error) {
    throw Error('Failed to fetch messages');
  }
});

export const sendMessage = createAsyncThunk('chat/sendMessage', async (message) => {
  try {
    const response = await axios.post('http://loriame.cn:5000/ailab/sendMessage', message, {
      headers: { 'Content-Type': 'application/json' },
    });
    return response.data;
  } catch (error) {
    throw Error('Failed to send message');
  }
});

const reducer = chatSlice.reducer;

const store = configureStore({
  reducer,
});

const ChatApp = () => {
  const dispatch = useDispatch();
  const messages = useSelector((state) => state.messages);
  const loading = useSelector((state) => state.loading);
  const error = useSelector((state) => state.error);

  useEffect(() => {
    dispatch(fetchMessages());
  }, [dispatch]);

  const handleSendMessage = (name, message) => {
    dispatch(setLoading(true));
    dispatch(setError(null));

    dispatch(
      sendMessage({ name, message })
    ).unwrap()
      .then(() => {
        dispatch(fetchMessages());
      })
      .catch((error) => {
        dispatch(setError(error.message));
      })
      .finally(() => {
        dispatch(setLoading(false));
      });
  };

  return (
    <div>
      {loading && <div>Loading...</div>}
      {error && <div>Error: {error}</div>}
      <List
        dataSource={messages}
        renderItem={({ name, message }) => (
          <List.Item>
            <List.Item.Meta title={name} description={message} />
          </List.Item>
        )}
      />
    </div>
  );
};

const App = () => {
  return (
    <Provider store={store}>
      <ChatApp />
    </Provider>
  );
};

export default App;

我们首先定义了初始状态、Redux的reducer和action，以及异步操作thunk。

在ChatApp组件中，我们使用useSelector和useDispatch来获取Redux store中的状态和派发action。在组件的useEffect钩子函数中，我们调用fetchMessages来获取聊天消息。当发送消息时，我们调用sendMessage来异步发送消息，并更新聊天消息。

最后，我们将应用程序包装在Provider组件中，以便Redux store能够在整个应用程序中共享。