ساخت ویجت گفتگوی زنده با پشتیبانی در ری اکت (React) — از صفر تا صد

1const express = require('express');
2const axios = require('axios');
3const app = express();
4
5const appID = '{appID}';
6const apiKey = '{apiKey}';
7const agentUID = '{agentUID}';
8
9const url = 'https://api.cometchat.com/v1';
10
11const headers = {
12  'Content-Type': 'application/json',
13  appid: appID,
14  apikey: apiKey,
15};

1app.get('/api/create', (req, res) => {
2  const data = {
3    uid: new Date().getTime(),
4    name: 'customer',
5  };
6  axios
7    .post(`${url}/users`, JSON.stringify(data), {
8      headers,
9    })
10    .then(response => {
11      requestAuthToken(response.data.data.uid)
12        .then(token => {
13          console.log('Success:' + JSON.stringify(token));
14          res.json(token);
15        })
16        .catch(error => console.error('Error:', error));
17    })
18    .catch(error => console.error('Error:', error));
19});
20
21app.get('/api/auth', (req, res) => {
22  const uid = req.query.uid;
23  requestAuthToken(uid)
24    .then(token => {
25      console.log('Success:' + JSON.stringify(token));
26      res.json(token);
27    })
28    .catch(error => console.error('Error:', error));
29});
30
31const requestAuthToken = uid => {
32  return new Promise((resolve, reject) => {
33    axios
34      .post(`${url}/users/${uid}/auth_tokens`, null, {
35        headers,
36      })
37      .then(response => {
38        console.log('New Auth Token:', response.data);
39        resolve(response.data.data);
40      })
41      .catch(error => reject(error));
42  });
43};

1app.get('/api/auth', (req, res) => {
2  const uid = req.query.uid;
3  requestAuthToken(uid)
4    .then(token => {
5      console.log('Success:' + JSON.stringify(token));
6      res.json(token);
7    })
8    .catch(error => console.error('Error:', error));
9});

1app.get('/api/users', (req, res) => {
2  axios
3    .get(`${url}/users`, {
4      headers,
5    })
6    .then(response => {
7      const { data } = response.data;
8      const filterAgentData = data.filter(data => {
9        return data.uid !== agentUID;
10      });
11      res.json(filterAgentData);
12    })
13    .catch(error => console.error('Error:', error));
14});

1const PORT = process.env.PORT || 5000;
2app.listen(PORT, () => {
3  console.log(`Listening on port ${PORT}`);
4});

1    
2const express = require('express');
3const axios = require('axios');
4const app = express();
5
6const appID = '{appID}';
7const apiKey = '{apiKey}';
8const agentUID = '{agentUID}';
9
10const url = 'https://api.cometchat.com/v1';
11
12const headers = {
13  'Content-Type': 'application/json',
14  appid: appID,
15  apikey: apiKey,
16};
17
18app.get('/api/create', (req, res) => {
19  const data = {
20    uid: new Date().getTime(),
21    name: 'customer',
22  };
23  axios
24    .post(`${url}/users`, JSON.stringify(data), {
25      headers,
26    })
27    .then(response => {
28      requestAuthToken(response.data.data.uid)
29        .then(token => {
30          console.log('Success:' + JSON.stringify(token));
31          res.json(token);
32        })
33        .catch(error => console.error('Error:', error));
34    })
35    .catch(error => console.error('Error:', error));
36});
37
38app.get('/api/auth', (req, res) => {
39  const uid = req.query.uid;
40  requestAuthToken(uid)
41    .then(token => {
42      console.log('Success:' + JSON.stringify(token));
43      res.json(token);
44    })
45    .catch(error => console.error('Error:', error));
46});
47
48const requestAuthToken = uid => {
49  return new Promise((resolve, reject) => {
50    axios
51      .post(`${url}/users/${uid}/auth_tokens`, null, {
52        headers,
53      })
54      .then(response => {
55        console.log('New Auth Token:', response.data);
56        resolve(response.data.data);
57      })
58      .catch(error => reject(error));
59  });
60};
61
62app.get('/api/users', (req, res) => {
63  axios
64    .get(`${url}/users`, {
65      headers,
66    })
67    .then(response => {
68      const { data } = response.data;
69      const filterAgentData = data.filter(data => {
70        return data.uid !== agentUID;
71      });
72      res.json(filterAgentData);
73    })
74    .catch(error => console.error('Error:', error));
75});
76
77const PORT = process.env.PORT || 5000;
78app.listen(PORT, () => {
79  console.log(`Listening on port ${PORT}`);
80});

1const config = {
2  appID: '{appID}',
3  agentUID: '{agentUID}',
4}
5
6export default config;

1body {
2  margin: 0;
3  padding: 0;
4  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
5    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
6    sans-serif;
7  -webkit-font-smoothing: antialiased;
8  -moz-osx-font-smoothing: grayscale;
9}
10
11code {
12  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
13    monospace;
14}
15
16
17.message {
18  overflow: hidden;
19}
20
21.balon1 {
22  float: right;
23  background: #35cce6;
24  border-radius: 10px;
25}
26
27.balon2 {
28  float: left;
29  background: #f4f7f9;
30  border-radius: 10px;
31}

1import React from 'react';
2import ReactDOM from 'react-dom';
3import 'bootstrap/dist/css/bootstrap.css';
4import './index.css';
5import App from './App';
6import { CometChat } from '@cometchat-pro/chat';
7import config from './config';
8
9CometChat.init(config.appID)
10
11ReactDOM.render(<App />, document.getElementById('root'));

1import React from 'react';
2import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
3
4import Client from './Client';
5import Agent from './Agent';
6
7const App = () => {
8  return (
9    <Router>
10      <React.Fragment>
11        <ul>
12          <li>
13            <Link to='/'>Client Home</Link>
14          </li>
15          <li>
16            <Link to='/agent'>Agent Dashboard</Link>
17          </li>
18        </ul>
19        <hr />
20        <Route exact path='/' component={Client} />
21        <Route path='/agent' component={Agent} />
22      </React.Fragment>
23    </Router>
24  );
25}
26
27export default App;

1import React, {Component} from 'react';
2import {Widget, addResponseMessage, addUserMessage, dropMessages} from 'react-chat-widget';
3import {CometChat} from '@cometchat-pro/chat';
4
5import config from './config';
6import 'react-chat-widget/lib/styles.css';
7
8const agentUID = config.agentUID;
9const CUSTOMER_MESSAGE_LISTENER_KEY = "client-listener";
10const limit = 30;
11
12class Client extends Component {
13  componentDidMount() {
14    addResponseMessage('Welcome to our store!');
15    addResponseMessage('Are you looking for anything in particular?');
16    
17    let uid = localStorage.getItem("cc-uid");
18    // check for uid, if exist then get auth token, login, create message listener and fetch previous messages
19   if ( uid !== null) {
20     this.fetchAuthToken(uid).then(
21       result => {
22         console.log('auth token fetched', result);
23         CometChat.login(result.authToken)
24         .then( user => {
25           console.log("Login successfully:", { user });
26           this.createMessageListener();
27           this.fetchPreviousMessages();
28           
29        })
30       },
31       error => {
32         console.log('Initialization failed with error:', error);
33       }
34     );
35   }
36  }
37
38  fetchAuthToken = async uid => {
39    const response = await fetch(`/api/auth?uid=${uid}`)
40    const result = await response.json()
41    return result;
42  }
43
44  createUser = async () => {
45    const response = await fetch(`/api/create`)
46    const result = await response.json()
47    return result;
48  }
49
50  createMessageListener = () => {
51    CometChat.addMessageListener(
52      CUSTOMER_MESSAGE_LISTENER_KEY,
53      new CometChat.MessageListener({
54        onTextMessageReceived: message => {
55          console.log("Incoming Message Log", { message });
56          addResponseMessage(message.text);
57        }
58      })
59    );
60  }
61
62  fetchPreviousMessages = () => {
63    var messagesRequest = new CometChat.MessagesRequestBuilder()
64    .setUID(agentUID)
65    .setLimit(limit)
66    .build();
67
68    messagesRequest.fetchPrevious().then(
69      messages => {
70        console.log("Message list fetched:", messages);
71        messages.forEach( message => {
72          if(message.receiver !== agentUID){
73            addResponseMessage(message.text);
74          } else {
75            addUserMessage(message.text)
76          }
77        });
78      },
79      error => {
80        console.log("Message fetching failed with error:", error);
81      }
82    );
83  }
84
85  handleNewUserMessage = newMessage => {
86    console.log(`New message incoming! ${newMessage}`);
87    var textMessage = new CometChat.TextMessage(
88      agentUID,
89      newMessage,
90      CometChat.MESSAGE_TYPE.TEXT,
91      CometChat.RECEIVER_TYPE.USER
92    );
93    let uid = localStorage.getItem("cc-uid");
94
95    if (uid === null) {
96      this.createUser().then(
97        result => {
98          console.log('auth token fetched', result);
99          localStorage.setItem("cc-uid",result.uid)
100          CometChat.login(result.authToken)
101          .then(user => {
102            console.log("Login successfully:", { user });
103            CometChat.sendMessage(textMessage).then(
104              message => {
105                console.log('Message sent successfully:', message);
106              },
107              error => {
108                console.log('Message sending failed with error:', error);
109              }
110            );
111            CometChat.addMessageListener(
112              CUSTOMER_MESSAGE_LISTENER_KEY,
113              new CometChat.MessageListener({
114                onTextMessageReceived: message => {
115                  console.log("Incoming Message Log", { message });
116                  addResponseMessage(message.text);
117                }
118              })
119            );
120          })
121      },
122      error => {
123        console.log('Initialization failed with error:', error);
124      })
125    } else {
126      // we have uid, do send
127      CometChat.sendMessage(textMessage).then(
128        message => {
129          console.log('Message sent successfully:', message);
130        },
131        error => {
132          console.log('Message sending failed with error:', error);
133        }
134      );
135    }
136  };
137
138  componentWillUnmount() {
139    CometChat.removeMessageListener(CUSTOMER_MESSAGE_LISTENER_KEY);
140    CometChat.logout();
141    dropMessages();
142  }
143
144  render() {
145    return (
146      <div className='App'>
147        <Widget
148          handleNewUserMessage={this.handleNewUserMessage}
149          title='My E-commerce Live Chat'
150          subtitle='Ready to help you'
151        />
152      </div>
153    );
154  }
155}
156
157export default Client;

1  componentDidMount() {
2    addResponseMessage('Welcome to our store!');
3    addResponseMessage('Are you looking for anything in particular?');
4    
5    let uid = localStorage.getItem("cc-uid");
6    // check for uid, if exist then get auth token, login, create message listener and fetch previous messages
7   if ( uid !== null) {
8     this.fetchAuthToken(uid).then(
9       result => {
10         console.log('auth token fetched', result);
11         CometChat.login(result.authToken)
12         .then( user => {
13           console.log("Login successfully:", { user });
14           this.createMessageListener();
15           this.fetchPreviousMessages();
16           
17        })
18       },
19       error => {
20         console.log('Initialization failed with error:', error);
21       }
22     );
23   }
24  }
25
26  fetchAuthToken = async uid => {
27    const response = await fetch(`/api/auth?uid=${uid}`)
28    const result = await response.json()
29    return result;
30  }
31
32  createUser = async () => {
33    const response = await fetch(`/api/create`)
34    const result = await response.json()
35    return result;
36  }
37
38  createMessageListener = () => {
39    CometChat.addMessageListener(
40      CUSTOMER_MESSAGE_LISTENER_KEY,
41      new CometChat.MessageListener({
42        onTextMessageReceived: message => {
43          console.log("Incoming Message Log", { message });
44          addResponseMessage(message.text);
45        }
46      })
47    );
48  }
49
50  fetchPreviousMessages = () => {
51    var messagesRequest = new CometChat.MessagesRequestBuilder()
52    .setUID(agentUID)
53    .setLimit(limit)
54    .build();
55
56    messagesRequest.fetchPrevious().then(
57      messages => {
58        console.log("Message list fetched:", messages);
59        messages.forEach( message => {
60          if(message.receiver !== agentUID){
61            addResponseMessage(message.text);
62          } else {
63            addUserMessage(message.text)
64          }
65        });
66      },
67      error => {
68        console.log("Message fetching failed with error:", error);
69      }
70    );
71  }

1import React, {Component} from 'react';
2
3import {CometChat} from '@cometchat-pro/chat';
4import MDSpinner from "react-md-spinner";
5import config from './config';
6
7const agentUID = config.agentUID;
8const AGENT_MESSAGE_LISTENER_KEY = 'agent-listener'
9const limit = 30;
10
11class Agent extends Component {
12
13  state = {
14    customers: [],
15    selectedCustomer: '',
16    chat: [],
17    chatIsLoading: false,
18    customerIsLoading:true
19  }

1componentDidMount() {
2    this.fetchAuthToken(agentUID).then(authToken => {
3        console.log('auth token fetched', authToken);
4        CometChat.login(authToken).then(user => {
5            console.log("Login successfully:", {
6                user
7            }); // after login, fetch all users        // put them into customer state        
8            this.fetchUsers().then(result => {
9                this.setState({
10                    customers: result,
11                    customerIsLoading: false
12                })
13            });
14            CometChat.addMessageListener(AGENT_MESSAGE_LISTENER_KEY, new CometChat.MessageListener({
15                onTextMessageReceived: message => {
16                    let {
17                        customers,
18                        selectedCustomer,
19                        chat
20                    } = this.state;
21                    console.log("Incoming Message Log", {
22                        message
23                    }); // check incoming message              // if from the same customer agent is currently chatting              // push a new chat item into chat state              
24                    if (selectedCustomer === message.sender.uid) {
25                        chat.push(message);
26                        this.setState({
27                            chat
28                        })
29                    } else { // if new customer, push a new customer into customer state               
30                        let aRegisteredCustomer = customers.filter(customer => {
31                            return customer.uid === message.sender.uid
32                        });
33                        if (!aRegisteredCustomer.length) {
34                            customers.push(message.sender) this.setState({
35                                customers
36                            })
37                        }
38                    }
39                }
40            }));
41        })
42    }, error => {
43        console.log('Initialization failed with error:', error);
44    });
45}
46fetchUsers = async () => {
47    const response = await fetch(`/api/users`) const result = await response.json() return result;
48}

1render() {
2        return ( < div className = 'container-fluid' > < div className = 'row' > < div className = 'col-md-2' > < /div>         <
3            div className = "col-md-8 h-100pr border rounded" > < div className = 'row' > < div className = 'col-lg-4 col-xs-12 bg-light'
4            style = {
5                {
6                    height: 658
7                }
8            } > < div className = 'row p-3' > < h2 > Customer List < /h2 > < /div > < div className = 'row ml-0 mr-0 h-75 bg-white border rounded'
9            style = {
10                {
11                    height: '100%',
12                    overflow: 'auto'
13                }
14            } > {
15                / * The CustomerList component * /
16            } < CustomerList {
17                ...this.state
18            }
19            selectCustomer = {
20                this.selectCustomer
21            }
22            / > < /div > < /div > < div className = 'col-lg-8 col-xs-12 bg-light'
23            style = {
24                {
25                    height: 658
26                }
27            } > < div className = 'row p-3 bg-white' > < h2 > Who you gonna chat with ? < /h2>              </div >
28            <
29            div className = 'row pt-5 bg-white'
30            style = {
31                {
32                    height: 530,
33                    overflow: 'auto'
34                }
35            } > {
36                /* The ChatBox component */
37            } < ChatBox {
38                ...this.state
39            }
40            />              </div > < div className = "row bg-light"
41            style = {
42                {
43                    bottom: 0,
44                    width: '100%'
45                }
46            } > < form className = "row m-0 p-0 w-100"
47            onSubmit = {
48                this.handleSubmit
49            } > < div className = "col-9 m-0 p-1" > < input id = "text"
50            className = "mw-100 border rounded form-control"
51            type = "text"
52            name = "text"
53            ref = "message"
54            placeholder = "Type a message..." / > < /div>               <
55            div className = "col-3 m-0 p-1" > < button className = "btn btn-outline-secondary rounded border w-100"
56            title = "Send"
57            style = {
58                {
59                    paddingRight: 16
60                }
61            } > Send < /button > < /div > < /form > < /div > < /div > < /div > < /div > < /div > < /div > )
62        }

1class ChatBox extends Component {
2  render(){
3    const {chat, chatIsLoading} = this.props;
4    if (chatIsLoading) {
5      return (
6        <div className='col-xl-12 my-auto text-center'>
7          <MDSpinner size='72'/>
8        </div>
9      )
10    }
11    else {
12      return (
13        <div className='col-xl-12'>
14          { 
15            chat
16            .map(chat => 
17              <div key={chat.id} className="message">
18                <div className={`${chat.receiver !== agentUID ? 'balon1': 'balon2'} p-3 m-1`}>
19                  {chat.text}
20                </div>
21              </div>)
22          }  
23        </div>
24      )
25    }
26  }
27
28}

1class CustomerList extends Component {
2  render(){
3    const {customers, customerIsLoading, selectedCustomer} = this.props;
4    if (customerIsLoading) {
5      return (
6        <div className='col-xl-12 my-auto text-center'>
7          <MDSpinner size='72'/>
8        </div>
9      )
10    }
11    else {
12      return (
13        <ul className="list-group list-group-flush w-100">
14          { 
15            customers
16            .map(customer => 
17              <li 
18                key={customer.uid} 
19                className={`list-group-item ${customer.uid === selectedCustomer ? 'active':''}`} 
20                onClick={() => this.props.selectCustomer(customer.uid)}>{customer.name} </li>)
21          }                
22        </ul>
23      )
24    }
25  }
26}

1  handleSubmit = event => {
2    event.preventDefault();
3    let message = this.refs.message.value;
4
5    var textMessage = new CometChat.TextMessage(
6      this.state.selectedCustomer,
7      message,
8      CometChat.MESSAGE_TYPE.TEXT,
9      CometChat.RECEIVER_TYPE.USER
10    );
11
12    CometChat.sendMessage(textMessage).then(
13      message => {
14        let {chat} = this.state;
15        console.log('Message sent successfully:', message);
16        chat.push(message);
17        this.setState({
18          chat
19        })
20      },
21      error => {
22        console.log('Message sending failed with error:', error);
23      }
24    );
25    this.refs.message.value='';
26  }

1  selectCustomer = uid => {
2    this.setState({
3      selectedCustomer: uid
4    }, ()=> {this.fetchPreviousMessage(uid)})
5  }
6
7  fetchPreviousMessage = uid => {
8    this.setState({
9      chat: [],
10      chatIsLoading: true
11    }, () => {
12      var messagesRequest = new CometChat.MessagesRequestBuilder()
13      .setUID(uid)
14      .setLimit(limit)
15      .build();
16
17      messagesRequest.fetchPrevious().then(
18        messages => {
19          console.log("Message list fetched:", messages);
20          this.setState({
21            chat: messages,
22            chatIsLoading: false
23          })
24        },
25        error => {
26          console.log("Message fetching failed with error:", error);
27        }
28      );
29    });
30  }

1  componentWillUnmount(){
2    CometChat.removeMessageListener(AGENT_MESSAGE_LISTENER_KEY);
3    CometChat.logout();
4  }