ServiceChat Customer Service Chat
introduce
ServiceChat is a set of customer service chat pages running on node.js, including client and customer service. The original intention of putting it on node is to make it easier for those who learn the front end to get started. The whole project is rich in functions, but the maintainability is poor. Write, because So the functions and pages are all on the same page. This is the reason why it was done urgently at the beginning, but I am not worried about the use problem at all. If you are not satisfied with this way of writing, you can extract the package yourself, thank you for your support!
Function list
- Robot Smart Chat
- Customer service manual online and offline
- The user actively sends information to the customer service (information includes text and emoticons)
- The customer service selects session members and actively sends information to the user (information including text and emoticons)
- The user/customer receives the information sent by the other party
- The customer service automatically closes the user session, and the offline list displays offline users. The client prompts the customer service to actively close the session, and the session ends.
- The customer service is offline manually, clear all the conversation lists, the client prompts that the customer service is offline, and the session ends
- The customer service refreshes or closes the page and goes offline, clears the list of all sessions, and the client prompts that the customer service is offline, and the session ends
- When the user refreshes the page or closes the page, the customer service terminal prompts the user to be offline, and the session ends
- Customer service toggle the toolbar on the right, select Quick Reply, and select Quick Reply Information to quickly reply to the content
- Send information, if the server is interrupted, the information status is 0 (not sent), if the server is still disconnected within 20 seconds, the information status is changed to -1 (sending failure), if the server recovers within 20 seconds, the information status is changed to 1 ( Sent successfully)
- Add productId on the client side, users can send product cards
- The customer service receives the product card sent by the user and checks the details
- Complete the picture sending. If the picture is too large, compress the picture. If the picture is too large, it is not allowed to send.
- Complete picture reception, view
- When multiple devices are online, force another device to go offline
- When multiple customer service devices are online, the old customer service terminal is forced to go offline and the member's session is interrupted
project address
GitHub: https://github.com/Arles-hsh/ServiceChat
Code Cloud: https://gitee.com/service-chat/service-chat
If you are interested in this project, you can click "Star" to support it. Thank you!
If you have any doubts or suggestions, please put them in the comments, comments are welcome!
renderings
The client enters the customer service interface:
Note: Because of the need to implement the function of manual transfer, all accesses are brought with parameters, that is, the sendId in the address, the purpose is to obtain the user's information. In addition, it should be noted that, The user terminal uses the mobile terminal, so you need to turn on the simulator of the mobile phone by f12 in the browser.
User to manual:
send messages (including text, pictures, emoticons)
customer service quick reply function
User offline or customer service offline Notification
Send card function
Note: At this time, in order to simulate the browsed products, the address parameter has more productId
The function demo is for the time being, and there are many functions waiting for friends to explore. Some people should start to wonder how the sendId and productId demonstrated above match the corresponding user and product information. In fact, I put it on the backend in advance In the json array, the purpose is to simulate the data in the database. In addition, there are json information for quick replies, user messages, and robot replies
Next, after the project is cloned, what needs to be done to get the project up and running
Install dependencies
- Enter the following commands in sequence on the backend:
cd service
npm install
node app.js
- Enter the following commands in sequence on the front end:
cd chatroom
npm install
npm run serve
browser running
Open the client: http://localhost:8080/?sendId=3
Open the client: http://localhost:8080/?sendId=1
If you need to send cards, open the client: http://localhost:8080/ ?sendId=3&productId=300 For
the information corresponding to the specific parameters, you can view the userList.json and product.json files
So far, it is done, and the final effect of the customer service project is displayed.
Brief description
- Back- end processing:
2. The front-end Chat.vue is the core file. It will take some time to understand it. Although there are a lot of html and css styles, it is not difficult to understand if you have the basics. One of the difficult ones may be js. The processing logic, if you don't understand, you can disturb at any time~
afterword
The project itself is actually completed by me using the signalr framework of C#. Because it involves other languages, it is not very friendly to many front-end learners, so I am thinking about how to transfer it to the front-end to give more front-end hobbies. So I spent a lot of time extracting, improving, and perfecting the old projects to get the final effect. Among them, node does not involve much, that is, simple js. It is easier for everyone to get started. Finally, attach me Socket manual for reference during learning: socket.io Chinese manual