In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-30 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/02 Report--
This article focuses on "how to use GoEasy to quickly achieve IM chat", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to use GoEasy to quickly achieve IM chat"!
First of all, our code layer divides the whole function into four layers:
Gorgeous display layer (index.html): you are responsible for the elegant and powerful function, I am responsible for the beauty of flowers. The display layer is actually a pure static html, the display interface, high-end point, is the person in charge of the computer interaction.
The control layer (controller.js): the function of the control layer is to accept the parameters of the page operation, call the service layer, and be responsible for controlling the display of the page according to the operation instructions of the page or the feedback of the service layer. You can't write any code that has nothing to do with the presentation logic, that is, you can't invade any business logic. The measure of whether this layer is good or not is that if the controller and view layers are deleted, service can accurately and completely describe all the business logic.
The key core business layer (service.js): accept the instructions of the controller layer, implement the business logic, call goeasy to provide network communication support when necessary, or call the restapi layer to query and save the data. This layer contains all the business logic, any code related to business logic can not be leaked to other layers, to ensure that as long as service exists, the soul of the entire project exists, to ensure that the service layer is entirely native code to achieve business logic, without similar vue or Mini Program front-end framework syntax and code infiltration, so that the service layer can be common in any front-end framework.
Powerful server interaction layer (restapi.js): complete the call of the server interface according to the passed parameters to achieve data query or, modify or save, and return results, do not participate in any business logic. In practice, it is mostly responsible for sending http requests and server interaction.
The goal of layering is to ensure that layers other than the core business layer can be easily replaced. For example: our current version is completed using html+jquery, if you want to develop a Uniapp implementation of Mini Program or app, just use Uniapp to draw a new shell, make some changes to the controller layer, you can easily complete a Mini Program or APP version of IM chat, without the need for service and restapi to make any changes. Similarly, if there is a change on the server side, or if you change the way you interact with the server, you only need to change the restapi, and the other three layers are not affected.
OK, with such a clear and excellent hierarchical design of the code structure, only needs an elegant piece of code to implement.
Ready, Go! Coding begins:
Login page, this is the simplest, close your eyes to draw an interface, after the user name password is correct, complete the following steps.
1.1. According to the user name queried, initialize the global variable: current user.
1.2. Assign the onNewMessage and onFriendOnline,onFriendOffline of the controller layer to service.
1.3. New goeasy establishes a persistent connection. Remember to pass in userid. If you need to remind subscriberPrencese users to go online, or if you can get more information than userId when you call HereNow to get the list of online users, you can pass more information into userdata.
1.4. Call restapi to query the user's friend list, and initialize the local friend list friendlist based on the result.
1.5. Put the friendUUID of all monitored friends into an array, call subscriberPrencense, and listen for all friends' online and offline events.
1.6. Use the uuid of the current user as the channel and call subscriber to listen for messages from all your friends.
1.7. Displays the friend list interface.
1.8. Initialize the online status of friends, pass in the userId of all friends in the form of an array, call hereNowByUserIds to get the list of friends currently online, change the online status of friend in friendlist to true according to the results, and change the profile pictures of online users on the interface to color.
Show friend list (1.7)
2.1. The service layer gets the current user information and displays the username and avatar of the current user on the page.
2.2. Service gets the list of local friends, and then controller displays the profile picture and name of each friend on the page. For the current online user, a small green dot is displayed next to it, and a click event is bound for each friend. When you click on a friend, the chat interface is displayed. If the friend has unread messages, a small red bubble shows the number of unread messages.
Click on a friend to enter the interface to chat with him.
3.1. The name of your chat friend is displayed at the top of the window.
3.2. Call restapi to query the chat history with the friend according to the current user's UUID and friend's friendUUID. If the sender of the chat record is yourself, it will be displayed on the right side of the page, and if it is sent by a friend, it will be displayed on the left.
3.3. Restore the friend's unread message in the local data to 0.
3.4. And scroll the chat to the bottom.
3.5. If you click back, go directly to the second step.
In the chat interface, enter a message and send:
4.1. The current user uuid forms a chatMessage as senderUUID and message content.
4.2. Call restapi to send chatMessage to the "server" side. We suggest that all messages be sent to their own server, save them into the library at the server side, and then publish them on the server side. The specific way is to convert the chatMessage into a string, enter it into the library, and then call the friend's channel as channel to complete the publish. (of course, you will find that in our sample code, this process is done directly in restapi, because for the convenience of demo demonstration, we simulate server-side behavior, I believe you understand)
4.3. After your message is sent successfully, it is displayed on the right side of the chat window.
New message received:
5.1. The event to receive a new message from a friend is defined in 1.6 when a new message from a friend is received.
5.2. First call restapi to save to the server.
5.3. Add 1 to the unread messages in the local friend data.
5.4. If the current interface is a list of friends, the number of unread messages from that friend is displayed on the interface.
5.5. If the message received is from the current conversation window, the message is displayed in the chat window, and service is called to clear the friend's unread message in the local data.
User online and offline reminders
6.1. Users are monitored online and offline at 1.5, when a notification is received that a user is online or offline (note that a list is returned, and multiple friends may have changed their status in an event).
6.2. Modify the online status of the friend object in the local data. If it is an online event, it will be displayed in color, and if it is offline, it will show black and white.
At this point, the whole chat function is completed, is it very simple? Only four API of goeasy are used in the whole demo
Subscriber (receive messages), subscriberPrencense (accept online and offline notifications), hereNowByUserIds (get the list of current online users), publish (send messages). For more information, please see the official goeasy document: https://www.goeasy.io/cn/developers.html
Huh! Isn't that on paper? Talk is cheap, show me the code! Where is the elegant code?
Do not worry, of course, there is a full set of code pull, if you put a download link to the zip file, the B box is too low, the old rule, see gitee: https://gitee.com/goeasy-io/GoEasyDemo-IM-Chat
Note:
The user name and password can be found in restapi.js
Replace appkey with your own common key in service.js
The subscriberPrencense and hereNowByUserIds methods are disabled by default
At this point, I believe you have a deeper understanding of "how to use GoEasy to quickly achieve IM chat". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.