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

真的只会一点点

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。然后，在终端中执行以下命令：

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

复制代码

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

1. import React, { useEffect } from 'react';
   
2. import { List } from 'antd';
   
3. import { useSelector, useDispatch } from 'react-redux';
   
4. import { createSlice, configureStore, createAsyncThunk, createAction } from '@reduxjs/toolkit';
   
5. import axios from 'axios';
   
6. 
   
7. const initialState = {
   
8.   messages: [],
   
9.   loading: false,
   
10.   error: null,
    
11. };
    
12. 
    
13. const chatSlice = createSlice({
    
14.   name: 'chat',
    
15.   initialState,
    
16.   reducers: {
    
17.     addMessage: (state, action) => {
    
18.       state.messages.push(action.payload);
    
19.     },
    
20.     setLoading: (state, action) => {
    
21.       state.loading = action.payload;
    
22.     },
    
23.     setError: (state, action) => {
    
24.       state.error = action.payload;
    
25.     },
    
26.   },
    
27. });
    
28. 
    
29. export const { addMessage, setLoading, setError } = chatSlice.actions;
    
30. 
    
31. export const fetchMessages = createAsyncThunk('chat/fetchMessages', async () => {
    
32.   try {
    
33.     const response = await axios.get('http://loriame.cn:5000/ailab/getMessages');
    
34.     return response.data;
    
35.   } catch (error) {
    
36.     throw Error('Failed to fetch messages');
    
37.   }
    
38. });
    
39. 
    
40. export const sendMessage = createAsyncThunk('chat/sendMessage', async (message) => {
    
41.   try {
    
42.     const response = await axios.post('http://loriame.cn:5000/ailab/sendMessage', message, {
    
43.       headers: { 'Content-Type': 'application/json' },
    
44.     });
    
45.     return response.data;
    
46.   } catch (error) {
    
47.     throw Error('Failed to send message');
    
48.   }
    
49. });
    
50. 
    
51. const reducer = chatSlice.reducer;
    
52. 
    
53. const store = configureStore({
    
54.   reducer,
    
55. });
    
56. 
    
57. const ChatApp = () => {
    
58.   const dispatch = useDispatch();
    
59.   const messages = useSelector((state) => state.messages);
    
60.   const loading = useSelector((state) => state.loading);
    
61.   const error = useSelector((state) => state.error);
    
62. 
    
63.   useEffect(() => {
    
64.     dispatch(fetchMessages());
    
65.   }, [dispatch]);
    
66. 
    
67.   const handleSendMessage = (name, message) => {
    
68.     dispatch(setLoading(true));
    
69.     dispatch(setError(null));
    
70. 
    
71.     dispatch(
    
72.       sendMessage({ name, message })
    
73.     ).unwrap()
    
74.       .then(() => {
    
75.         dispatch(fetchMessages());
    
76.       })
    
77.       .catch((error) => {
    
78.         dispatch(setError(error.message));
    
79.       })
    
80.       .finally(() => {
    
81.         dispatch(setLoading(false));
    
82.       });
    
83.   };
    
84. 
    
85.   return (
    
86.     <div>
    
87.       {loading && <div>Loading...</div>}
    
88.       {error && <div>Error: {error}</div>}
    
89.       <List
    
90.         dataSource={messages}
    
91.         renderItem={({ name, message }) => (
    
92.           <List.Item>
    
93.             <List.Item.Meta title={name} description={message} />
    
94.           </List.Item>
    
95.         )}
    
96.       />
    
97.     </div>
    
98.   );
    
99. };
    
100. 
     
101. const App = () => {
     
102.   return (
     
103.     <Provider store={store}>
     
104.       <ChatApp />
     
105.     </Provider>
     
106.   );
     
107. };
     
108. 
     
109. 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。然后，在终端中执行以下命令：

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

复制代码

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

1. import React, { useEffect } from 'react';
   
2. import { List } from 'antd';
   
3. import { useSelector, useDispatch } from 'react-redux';
   
4. import { createSlice, configureStore, createAsyncThunk, createAction } from '@reduxjs/toolkit';
   
5. import axios from 'axios';
   
6. 
   
7. const initialState = {
   
8.   messages: [],
   
9.   loading: false,
   
10.   error: null,
    
11. };
    
12. 
    
13. const chatSlice = createSlice({
    
14.   name: 'chat',
    
15.   initialState,
    
16.   reducers: {
    
17.     addMessage: (state, action) => {
    
18.       state.messages.push(action.payload);
    
19.     },
    
20.     setLoading: (state, action) => {
    
21.       state.loading = action.payload;
    
22.     },
    
23.     setError: (state, action) => {
    
24.       state.error = action.payload;
    
25.     },
    
26.   },
    
27. });
    
28. 
    
29. export const { addMessage, setLoading, setError } = chatSlice.actions;
    
30. 
    
31. export const fetchMessages = createAsyncThunk('chat/fetchMessages', async () => {
    
32.   try {
    
33.     const response = await axios.get('http://loriame.cn:5000/ailab/getMessages');
    
34.     return response.data;
    
35.   } catch (error) {
    
36.     throw Error('Failed to fetch messages');
    
37.   }
    
38. });
    
39. 
    
40. export const sendMessage = createAsyncThunk('chat/sendMessage', async (message) => {
    
41.   try {
    
42.     const response = await axios.post('http://loriame.cn:5000/ailab/sendMessage', message, {
    
43.       headers: { 'Content-Type': 'application/json' },
    
44.     });
    
45.     return response.data;
    
46.   } catch (error) {
    
47.     throw Error('Failed to send message');
    
48.   }
    
49. });
    
50. 
    
51. const reducer = chatSlice.reducer;
    
52. 
    
53. const store = configureStore({
    
54.   reducer,
    
55. });
    
56. 
    
57. const ChatApp = () => {
    
58.   const dispatch = useDispatch();
    
59.   const messages = useSelector((state) => state.messages);
    
60.   const loading = useSelector((state) => state.loading);
    
61.   const error = useSelector((state) => state.error);
    
62. 
    
63.   useEffect(() => {
    
64.     dispatch(fetchMessages());
    
65.   }, [dispatch]);
    
66. 
    
67.   const handleSendMessage = (name, message) => {
    
68.     dispatch(setLoading(true));
    
69.     dispatch(setError(null));
    
70. 
    
71.     dispatch(
    
72.       sendMessage({ name, message })
    
73.     ).unwrap()
    
74.       .then(() => {
    
75.         dispatch(fetchMessages());
    
76.       })
    
77.       .catch((error) => {
    
78.         dispatch(setError(error.message));
    
79.       })
    
80.       .finally(() => {
    
81.         dispatch(setLoading(false));
    
82.       });
    
83.   };
    
84. 
    
85.   return (
    
86.     <div>
    
87.       {loading && <div>Loading...</div>}
    
88.       {error && <div>Error: {error}</div>}
    
89.       <List
    
90.         dataSource={messages}
    
91.         renderItem={({ name, message }) => (
    
92.           <List.Item>
    
93.             <List.Item.Meta title={name} description={message} />
    
94.           </List.Item>
    
95.         )}
    
96.       />
    
97.     </div>
    
98.   );
    
99. };
    
100. 
     
101. const App = () => {
     
102.   return (
     
103.     <Provider store={store}>
     
104.       <ChatApp />
     
105.     </Provider>
     
106.   );
     
107. };
     
108. 
     
109. export default App;

复制代码

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

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

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