Scalable Front-End Instant Messaging Method, Electronic Device and Storage Medium

Abstract

The present invention relates to an extensible front-end instant messaging method, an electronic device, and a storage medium, including: in response to a user's request to initiate a session at the front end, obtaining historical message data related to the session according to preset query conditions through an interface provided by an API server; establishing a two-way communication connection between a client and a message server based on the WebSocket protocol for receiving real-time message data; integrating the received real-time message data with the already obtained historical message data based on the timestamp or unique identifier of the message to form a unified message sequence based on time series; by maintaining the unified message sequence and synchronizing the unified message sequence to the front-end user interface through a reactive data binding mechanism to achieve real-time update of data and interface. The present invention provides a general interface through a bridging layer, facilitating integration with other systems and enhancing the scalability of the system.

Description

Technical Field

[0001] The present invention relates to the field of Internet communication technologies, and particularly to a scalable front-end instant messaging method, an electronic device, and a storage medium. Background Art

[0002] In the field of instant messaging, with the rapid development of the Internet and mobile Internet, users' demand for real-time information transmission is increasing day by day. Traditional instant messaging solutions are mainly based on the client-server architecture, and the client communicates with the server through methods such as polling or long connections to achieve real-time message sending and receiving. However, there are still some defects in the front-end implementation of the existing technologies:

[0003] Firstly, traditional Web instant messaging solutions usually rely on frequent HTTP requests for data interaction, resulting in high server load. Especially in high-concurrency scenarios, it is easy to cause delays and performance bottlenecks, and it is difficult to meet users' requirements for low latency and high concurrency. Although the emergence of WebSocket technology has improved this situation, how to effectively integrate historical messages and real-time messages and efficiently manage and display them on the front end is still a challenge.

[0004] Secondly, the development and maintenance costs of the front-end UI are relatively high. Traditional Web development methods usually require manually writing a large amount of HTML, CSS, and JavaScript code, and it is difficult to quickly build a complex instant messaging interface. At the same time, compatibility issues across different platforms also increase the development difficulty. Although the emergence of some UI frameworks and component libraries has simplified front-end development, how to effectively apply them to the instant messaging scenario and achieve real-time synchronization of data and UI still requires careful design and implementation.

[0005] In addition, when existing instant messaging solutions are integrated with other systems, a large amount of customized development is usually required, resulting in high system coupling and difficulty in maintenance and expansion. How to provide a set of general interfaces to facilitate the quick integration of instant messaging functions by other systems is an urgent problem to be solved.

[0006] Finally, there are certain limitations in the extensibility of message types in existing instant messaging solutions. Usually, only basic message types such as text and pictures are supported, and it is difficult to meet users' requirements for custom message types. How to provide a flexible extension mechanism to support users to customize message types according to their needs is also an important research direction.

[0007] Therefore, a more efficient, scalable, easy-to-integrate, and easy-to-maintain front-end instant messaging solution is needed to overcome the defects of the existing technologies and meet the growing needs of users. Summary of the Invention

[0008] The object of the present invention is to provide a scalable front-end instant messaging method, an electronic device and a storage medium, so as to solve the problems of high server load and high maintenance cost in the prior art.

[0009] To achieve one of the above-mentioned objects of the present invention, an embodiment of the present invention provides a scalable front-end instant messaging method, and the method includes:

[0010] In response to a user's request to initiate a session at the front end, through the interface provided by the API server, obtain historical message data related to the session according to preset query conditions;

[0011] Based on the WebSocket protocol, establish a two-way communication connection between the client and the message server for receiving real-time message data;

[0012] Based on the timestamp or unique identifier of the message, integrate the received real-time message data with the obtained historical message data to form a unified message sequence based on time series;

[0013] By maintaining the unified message sequence and synchronizing the unified message sequence to the front-end user interface through a reactive data binding mechanism, real-time update of data and interface is achieved.

[0014] As a further improvement of an embodiment of the present invention, the method further includes that the preset query conditions include at least one of a session identifier, a time range, a message sender or receiver identifier, and a message type.

[0015] As a further improvement of an embodiment of the present invention, the method further includes that the "integrating the received real-time message data with the obtained historical message data based on the timestamp or unique identifier of the message to form a unified message sequence based on time series" includes:

[0016] Sort the historical message data and real-time message data according to the timestamp;

[0017] Use the unique identifier to remove duplicates from the duplicate message data;

[0018] Merge the sorted message data into the unified message sequence based on time series.

[0019] As a further improvement of an embodiment of the present invention, the method further includes that the "maintaining the unified message sequence and synchronizing the unified message sequence to the front-end user interface through a reactive data binding mechanism" includes:

[0020] Maintain the unified message sequence based on time series by maintaining globally shared state data;

[0021] The reactive data binding mechanism includes:

[0022] Define reactive data attributes associated with the time-based unified message sequence;

[0023] When the globally shared state data changes, perform an update operation in response to the change to synchronously update the parts of multiple user interfaces that are bound to the reactive data attributes.

[0024] As a further improvement of an embodiment of the present invention, the method further includes that the "maintaining a unified message sequence and synchronizing the unified message sequence to the front-end user interface through a reactive data binding mechanism" further includes,

[0025] Implement the maintenance of the unified message sequence by using Vuex; the Vuex is used to centrally manage the state of the front-end application and drive state changes in a predictable manner;

[0026] The front-end user interface is built using a UI component library to unify the visual style of the front-end user interface; the UI component library is implemented using Ant Design.

[0027] As a further improvement of an embodiment of the present invention, the method further includes that the client periodically sends heartbeat messages to the message server;

[0028] If the client does not receive other messages except heartbeat messages within a preset time, the client initiates a reconnection operation to maintain the two-way communication connection.

[0029] As a further improvement of an embodiment of the present invention, the method further includes providing a set of general interfaces through the IM Bridge layer for external systems to call to implement instant messaging functions. The interfaces include interfaces for initiating one-on-one chat sessions and group chat sessions, interfaces for sending messages, interfaces for searching for users, interfaces for registering custom message types, and interfaces for waking up the chat window with one key.

[0030] As a further improvement of an embodiment of the present invention, the method further includes that the interface for registering custom message types includes,

[0031] Receive a custom message type identifier and a corresponding message rendering function provided by an external system; the rendering function is defined by the external system according to its own needs;

[0032] Maintain the mapping relationship between the message type identifier and the corresponding rendering function;

[0033] When a message is received, find the corresponding rendering function according to the message type identifier and use the found rendering function to render and display the message content to achieve external customization of the message content.

[0034] To achieve one of the above-mentioned invention purposes, an embodiment of the present invention further provides an electronic device, including a memory and a processor. It is characterized in that a computer program that can run on the processor is stored in the memory, and the steps in the above-mentioned extensible front-end instant messaging method are implemented when the program is executed on the processor.

[0035] To achieve one of the above-mentioned invention purposes, an embodiment of the present invention further provides a storage medium. The storage medium stores a computer program, and it is characterized in that the steps in the above-mentioned extensible front-end instant messaging method are implemented when the computer program is executed by a processor.

[0036] Compared with the prior art, the present invention provides an extensible front-end instant messaging method, an electronic device and a storage medium. By integrating historical messages and real-time messages and efficiently managing and displaying them at the front end, the user experience of instant messaging is effectively improved. The use of front-end state management and UI component libraries reduces the front-end development and maintenance costs and improves the development efficiency. By providing a general interface through the bridging layer, it facilitates the integration with other systems and enhances the scalability of the system. Supporting custom message types meets the diverse needs of users and enhances the competitiveness of the product. BRIEF DESCRIPTION OF THE DRAWINGS

[0037] Figure 1 It is the overall flowchart of the extensible front-end instant messaging method described in the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0038] The present invention will be described in detail below with reference to the specific embodiments shown in the drawings. However, these embodiments do not limit the present invention, and any structural, method, or functional transformation made by those of ordinary skill in the art based on these embodiments is included in the protection scope of the present invention.

[0039] The embodiments of the present invention will be described in detail below. The examples of the embodiments are shown in the drawings, where the same or similar reference numerals represent the same or similar elements or elements with the same or similar functions throughout. The embodiments described below with reference to the drawings are exemplary and are only used to explain the present invention and should not be construed as a limitation of the present invention.

[0040] In the first embodiment of the present invention, the present invention provides an extensible front-end instant messaging method, as Figure 1 shown, the method includes,

[0041] S1: In response to a user's request to initiate a session at the front end, through the interface provided by the API server, obtain historical message data related to the session according to preset query conditions;

[0042] S2: Based on the WebSocket protocol, establish a two-way communication connection between the client and the message server for receiving real-time message data;

[0043] S3: Based on the timestamp or unique identifier of the message, integrate the received real-time message data with the obtained historical message data to form a unified message sequence based on time series;

[0044] S4: By maintaining the unified message sequence and synchronizing the unified message sequence to the front-end user interface through the reactive data binding mechanism to achieve real-time update of data and interface.

[0045] In a specific embodiment of the present invention, the preset query conditions include at least one of a session identifier, a time range, a message sender or receiver identifier, and a message type.

[0046] It should be noted that the preset query conditions are used to retrieve historical message data from the API server and can be flexibly combined according to the actual application scenario, including but not limited to the following types:

[0047] Session identifier (Conversation ID): Used to uniquely identify a session, such as the ID of a one-on-one chat session or the ID of a group. By specifying the session identifier, all messages in a specific session can be retrieved. For example, in a one-on-one chat scenario, the session identifier can be a combination of two user IDs; in a group chat scenario, the session identifier can be the ID of the group. This method is the most commonly used query method and can quickly locate the message records of the target session.

[0048] Time range (Time Range): Used to limit the time range of messages, such as specifying a start time and an end time. By specifying the time range, messages within a specific time period can be retrieved. For example, users can query message records within the past 24 hours or within a specific date range. The time range can be accurate to the second or millisecond level to meet different query accuracy requirements.

[0049] Message sender or receiver identifier (Sender / Receiver ID): Used to specify the sender or receiver of the message. By specifying the sender identifier, all messages sent by this user can be retrieved; by specifying the receiver identifier, all messages sent to this user can be retrieved. This method is often used for users to find specific messages they sent or received. For example, users can find the messages they sent to a specific user or the messages sent to them by a specific user.

[0050] Message Type: Used to specify the type of the message, such as text message, picture message, voice message, video message, file message, etc. By specifying the message type, specific types of messages can be retrieved. For example, users can view only all the picture messages in a conversation or only all the voice messages. This way facilitates users to quickly filter specific types of information.

[0051] The above query conditions can be used alone or in combination to achieve a more precise query. For example: Query according to the conversation identifier and time range: Retrieve all the messages in a specific conversation within a certain time period. Query according to the conversation identifier and message type: Retrieve all the picture messages in a specific conversation. Query according to the conversation identifier, sender identifier, and time range: Retrieve all the messages sent by a specific user in a specific conversation within a certain time period.

[0052] In a specific implementation scenario of the present invention, historical messages, department structure, and user information are obtained from the Api server through an ajax request. After the data is returned, the state data of Vuex is updated, and at the same time, the page components are driven to update, including but not limited to the historical conversation list and the personnel structure list.

[0053] Real-time messages interact with the message server through a web socket socket. A connection is created through new WebSocket(url), including:

[0054] Listen for the message event to obtain the messages pushed by the server;

[0055] Listen for the onclose event to achieve reconnection when disconnected;

[0056] Send messages to the server through the send method of the socket instance.

[0057] In a specific implementation manner of the present invention, based on the timestamp or unique identifier of the message, the received real-time message data is integrated with the obtained historical message data to form a unified message sequence based on time sequence. Specifically,

[0058] Sort the historical message data and real-time message data according to the timestamp;

[0059] Use the unique identifier to remove duplicate message data;

[0060] Merge the sorted message data into the unified message sequence based on time sequence.

[0061] Furthermore, sort the historical message data and real-time message data according to the timestamp:

[0062] First, obtain historical message data and real-time message data from the historical data acquisition module and the real-time data reception module respectively. These data usually exist in the form of arrays or lists, and each message object contains a timestamp field for recording the sending or receiving time of the message. Then, use a sorting algorithm (such as quicksort, mergesort, etc.) to sort the historical message data and the real-time message data respectively according to the timestamp. The purpose of sorting is to ensure that the messages are arranged in chronological order, thus avoiding chronological confusion. The precision of the timestamps should be consistent. For example, all use millisecond-level timestamps to ensure the accuracy of sorting. If the timestamp precisions of the historical messages and the real-time messages are inconsistent, unified conversion is required.

[0063] Furthermore, use a unique identifier to deduplicate duplicate message data:

[0064] In an instant messaging system, due to network fluctuations, message retransmission, etc., duplicate messages may occur. To avoid displaying the same message repeatedly on the user interface, deduplication operations are required. Each message object should contain a unique identifier for uniquely identifying a message. Before or after integrating the historical messages and the real-time messages, data structures such as hash tables and sets can be used, with the unique identifier as the key, to deduplicate the messages. The specific operation can be to traverse the message list, add the unique identifier of the message to the hash table, and discard the duplicate message if a duplicate identifier is found.

[0065] Furthermore, merge the sorted message data into an ordered message sequence:

[0066] After sorting and deduplication, the sorted historical message data and real-time message data need to be merged into a unified message sequence. When merging, comparison and insertion still need to be performed according to the timestamp to ensure that the merged message sequence is still arranged in chronological order. The merged message sequence will be used as the final message data source and passed to the UI synchronization module for rendering and display.

[0067] In a specific implementation scenario of the present invention, the Message message structure includes a responseHeader and a responseBody;

[0068] The responseHeader includes currMilis, responseType, sessionld, version; the responseBody includes ackld, conversineType, lastMsgld, moreMsgFlag, msgCount, msgList;

[0069] Among them, what operation the client needs to perform is determined by the responseType in the responseHeader, and it enters different processing flows. The message body is in the responseBody;

[0070] The responseType includes 90001: Login successful, 90004: Client synchronizes messages, 90003: Message sent successfully, 90005: Receive message, 90006: Read flag sent successfully, 90007: The other party has read the message, 90011: Create group chat successfully, 90012: Add group chat members successfully, 90013: Delete group chat members successfully, 90015: Modify group chat members successfully, 90017: Trigger work message, 90018: Recall message successfully.

[0071] The following is the processing flow when the responseType value is 90005:

[0072] 1) Take out the message data from the msgList. The message data structure is:

[0073] Messageltem: appName, content, conversineType, iconUr, msgld, msgStatus, msgType, receiverld, sendTime, senderld;

[0074] Among them, conversineType is the chat type, including private chat, group chat, system message, AI message; msgType is the message type, including text, picture, voice, video, geographical location, file, notification, prompt, intelligent dialogue robot, custom message type; senderId is the ID of the sender; receiverId is the ID of the receiver; Content is the chat content.

[0075] 2) When receiving a message, determine a certain conversation according to conversineType, senderId, and receiverId. When the conversation already exists, directly add the corresponding conversation to the msgItem; if the conversation does not exist, create a new conversation and add the conversation to the conversation list;

[0076] 3) When the message window renders the message details, render different UIs according to msgType, such as text, picture, video, etc.:

[0077] First, register built-in message types, including 13 built-in types: revoke, text, image, sound, link, group, system, location, work, article, file, video, and time, and map the message types to message components;

[0078] Since a single message can be operable (download, forward, revoke) or inoperable. For example, system-type messages are inoperable, ordinary messages are operable (forward and revoke), and file messages can be downloaded. Therefore, in the invention, a basic message UI layout BaseMessageLayout is custom-defined, and at the same time, an operable container BaseOptionalLayout and a file container BaseFileLayout are custom-defined. When a single message arrives at BaseMessageLayout, according to the message types registered above, through the rendering function of BaseMessageLayout, it is determined what type of UI to render;

[0079] 4) When sending a message, obtain the input message content through the input box, construct a msgItem according to different message types, and send it back to the server through the send method of websocket.

[0080] In a specific embodiment of the present invention, by maintaining a unified message sequence and synchronizing the unified message sequence to the front-end user interface through a reactive data binding mechanism, specifically

[0081] Maintain the unified message sequence based on time series by maintaining globally shared state data;

[0082] The reactive data binding mechanism includes:

[0083] Define reactive data attributes associated with the unified message sequence based on time series;

[0084] When the globally shared state data changes, respond to the change and perform an update operation to synchronously update the parts bound to the reactive data attributes in multiple user interfaces.

[0085] Implement the maintenance of the unified message sequence by adopting Vuex; Vuex is used to centrally manage the state of the front-end application and drive state changes in a predictable manner;

[0086] The front-end user interface is constructed using a UI component library to unify the visual style of the front-end user interface; the UI component library is implemented using Ant Design.

[0087] It should be noted that the reactive data binding mechanism adopted by the present invention is based on the internal implementation of the modern front-end framework Vue.js. These frameworks usually use technologies such as the observer pattern and data hijacking to achieve efficient reactive updates. When defining reactive data attributes associated with the unified message sequence in the front-end user interface components, the framework will "hijack" these attributes, that is, use specific methods internally to intercept the read and modification operations of these attributes. When the user interface component is first rendered, the framework will track which parts of the component "depend" on these reactive data attributes. For example, if a The text content of the element is bound to the latest message in the message sequence, then the The element becomes a "dependency" of the message property. The framework will record these dependency relationships. When the unified message sequence changes (for example, a new real-time message is received via WebSocket and added to the message sequence), the framework will detect this change (because the data property is "hijacked"). The framework will immediately notify all components that "depend" on this message sequence. The components that receive the notification will perform an update operation and re-render themselves, thus displaying the latest message content on the user interface.

[0088] It should be noted that Vuex is a state management pattern + library developed specifically for Vue.js applications. By adopting centralized storage to manage the states of all components of the application and ensuring that the states change in a predictable manner according to corresponding rules. In this solution, Vuex is mainly used to manage the following states: User state: including information such as the ID, username, and avatar of the currently logged-in user. Session list: including information about all sessions participated by the user, such as session ID, session type, session name, and the last message, etc. Message data: including all messages in the current session, including historical messages and real-time messages. Network connection status: including the status of the WebSocket connection, such as connecting, connected, disconnected, etc. UI state: including some UI-related states, such as the currently selected session, the content of the message input box, etc. By using Vuex, these states can be effectively organized and managed, avoiding the chaos of state passing between components, and improving the maintainability and scalability of the code. For example, when a new real-time message is received, the message data state can be updated through the mutation of Vuex, and then the components will automatically respond to the update to achieve real-time display of the message.

[0089] It should be noted that Ant Design is a set of enterprise-level UI design languages and React component libraries. Ant Design Vue is the Vue.js implementation of Ant Design, providing a rich set of UI components, such as: Layout components: used to build the overall layout of the page, such as Grid, Layout, etc. Navigation components: used to build navigation menus, such as Menu, Breadcrumb, etc. Form components: used to create forms, such as Input, Select, Form, etc. Message display components: used to display messages, such as Message, Notification, etc.

[0090] In a specific implementation scenario of the present invention, the UI is implemented based on Vue / ant-design, and the global data UI interaction response is completed through Vuex, including private chat windows, group chat windows, sending text messages, organizational structure address books, etc.;

[0091] This implementation scenario maintains a Vuex instance for the window UI, where the state includes: currentUsers: current user information, deptList: department personnel list, hisSessions: main panel conversation list, chattingList: chat pop-up window conversation list, chattingItem: current conversation.

[0092] In this way, only through the state synchronization function of vuex, the UI can be modified in one place and synchronized in multiple places. For example, when receiving a new message, if the conversation needs to be pinned to the main panel message list, chat pop-up window conversation list, and current chat window, only the corresponding positions in hisSessions, chattingList, and chattingItem need to be modified;

[0093] At the same time, the unified style of the chat UI interface is completed through a third-party component library, such as button and pop-up window styles; and the corresponding components are imported on demand to reduce the size of the packaged file: only the components used in this implementation scenario are imported. By importing one by one and using the tree shaking function provided by webpack, the unused components are removed.

[0094] In a specific implementation manner of the present invention, the client periodically sends heartbeat messages to the message server; if the client does not receive other messages except the heartbeat message within a preset time, the client initiates a reconnection operation to maintain the two-way communication connection.

[0095] It should be noted that to ensure the effectiveness of the connection, if no messages other than the heartbeat message (90002) are received after 60s, the heartbeat reconnection mechanism is started, and a message with requestType = 2 is sent to the message server.

[0096] In a specific implementation manner of the present invention, a set of general interfaces are provided through the IM Bridge layer for external systems to call to implement instant messaging functions. The interfaces include interfaces for initiating one-on-one chat sessions and group chat sessions, interfaces for sending messages, interfaces for searching users, interfaces for registering custom message types, and interfaces for waking up the chat window with one key.

[0097] It should be noted that the IM Bridge layer, as a bridge between the instant messaging system and external systems, provides a set of standardized APIs, enabling external systems to easily integrate instant messaging functions without caring about the internal implementation details of the instant messaging system. Its main advantages include:

[0098] Decoupling and modularization: The IM Bridge layer decouples the instant messaging system from external systems, improving the modularity of the system. External systems only need to interact through the APIs provided by IM Bridge, without directly operating on the internal components of the instant messaging system, reducing the complexity of the system and facilitating future maintenance and upgrades. Standardized interfaces: The IM Bridge layer provides a set of standardized APIs, defining unified request and response formats, which facilitates the integration of different external systems. Even if the internal implementation of the instant messaging system changes, as long as the APIs of IM Bridge remain unchanged, external systems do not need to make any modifications. Simplified integration: External systems only need to call the APIs provided by IM Bridge to implement various instant messaging functions, without having to write complex code to handle underlying details such as WebSocket connections and message format conversions, greatly simplifying the integration process and reducing development costs. Improved scalability: Through the IM Bridge layer, the functions of the instant messaging system can be easily extended, such as adding new message types and supporting new communication protocols. These extensions are transparent to external systems and do not affect their normal operation.

[0099] It should be noted that custom message types allow developers to extend the types and display methods of messages according to actual needs. For example, they support sending non-text messages such as pictures, videos, and files. The implementation details and advantages include:

[0100] Flexible message rendering: By registering custom message rendering components or rendering functions, the display methods of different types of messages can be flexibly controlled. For example, picture messages can use tag display, and video messages can use <video>For label playback, the file message can provide a download link. Easy to expand: When new message types need to be supported, only new message type identifiers and corresponding rendering components or rendering functions need to be registered, without modifying the core code of the instant messaging system, improving the scalability of the system. Enhance the user experience: Supporting rich message types can enhance the user experience, making communication more vivid and diverse.

[0101] In a specific implementation scenario of the present invention, by implementing the IM Bridge bridging layer, encapsulating IM function points, and exposing interfaces externally, function methods such as initiating a chat, forwarding a manuscript, and initiating a group chat are provided, facilitating one-click calls by systems such as CMS and RM on the original code basis;

[0102] The APIs of IM Bridge include $bus: global event bus, config: IM configuration, init(params), sendSMS(users), startChat(session), startGroupChat(session, userlds), searchUser(name), pickConversation(event), shareArticle(data), sendMessage(message), addConversation(session), minimizeConversation(), closeConversation(), deleteConversation(), deleteGroup(), registMessage(component, config).

[0103] Among them, init(params) is used to configure the IM server, including the business system and message system links, to reduce the coupling degree of IM to a certain system; sendSMS is used to bring up the SMS sending window; startChat is used to directly bring up the private chat dialogue window, and the parameter is the specified dialogue; startGroupChat is used to directly bring up the group chat window. If session has a value, it is to add new members (userIds) to the current group chat conversation when adding new group members; searchUser is used to search for users, and the results are displayed in the user list on the main panel; pickConversation is used to directly bring up the select conversation pop-up window; shareArticle is used to pop up the conversation selection pop-up window and directly share the manuscript to the corresponding conversation; sendMessage is used to directly send a message; addConversation is used to directly add a conversation to the conversation list in the chat window; registMessage is used to register custom messages;

[0104] When integrating the im sdk into a project, a global $nfIM object will be mounted. All exposed APIs are mounted on this object. The basic registration method only requires passing in the Socket server link and the API server link, as follows:

[0105] $nfIM.init({

[0106] WS_API_URL: `API server link`,

[0107] WS_URL: `Socket server link`,

[0108] });

[0109] After registration is completed, it can be called directly.

[0110] In a specific embodiment of the present invention, the interface for registering custom message types is specifically

[0111] Receiving a custom message type identifier and a corresponding message rendering function provided by an external system; the rendering function is defined by the external system according to its own needs;

[0112] Maintaining the mapping relationship between the message type identifier and the corresponding rendering function;

[0113] When receiving a message, searching for the corresponding rendering function according to the message type identifier, and using the found rendering function to render and display the message content to achieve external customization of the message content.

[0114] In a specific implementation scenario of the present invention, a function for providing custom message types is based on the Vue rendering function. The usage method is as follows:

[0115] IM Bridge provides the registMessage API, and the parameters are component and config. In a Vue project, the parameter component can be directly passed in as a Vue component. If it is in other frameworks or native projects, the rendering function writing method is used:

[0116] $nfIM.registMessage({

[0117] props: ['message'],

[0118] render(h) {

[0119] return h('div', this.message.content);

[0120] }

[0121] }, {msgType: 'custom1'})

[0122] Internally, it is implemented by maintaining a message type registry that maps message types (including built-in and custom types) to corresponding components. When a server message arrives at BaseMessageLayout, in the render method of BaseMessageLayout, the corresponding type of message component is retrieved according to msgType, and at the same time, the message is passed into the component as a Prop. At this time, the message is rendered onto the corresponding page.

[0123] In the second embodiment of the present invention, the present invention provides an electronic device, including a memory and a processor, characterized in that the memory stores a computer program that can run on the processor, and when the program is executed on the processor, the steps in the above-mentioned extensible front-end instant messaging method are implemented.

[0124] In the third embodiment of the present invention, the present invention provides a storage medium, the storage medium stores a computer program, characterized in that when the computer program is executed by a processor, the steps in the above-mentioned extensible front-end instant messaging method are implemented.

[0125] In summary, the extensible front-end instant messaging method, electronic device, and storage medium provided by the present invention effectively improve the user experience of instant messaging by integrating historical messages and real-time messages and efficiently managing and displaying them on the front end. By adopting front-end state management and a UI component library, the front-end development and maintenance costs are reduced, and the development efficiency is improved. By providing a common interface through the bridge layer, it is convenient to integrate with other systems and enhances the scalability of the system. Supporting custom message types meets the diverse needs of users and enhances the competitiveness of the product.

[0126] It should be understood that although this specification is described according to embodiments, not every embodiment only contains an independent technical solution. This narrative way of the specification is only for clarity. Those skilled in the art should regard the specification as a whole, and the technical solutions in each embodiment can also be appropriately combined to form other embodiments that can be understood by those skilled in the art.

[0127] Those skilled in the art can clearly understand that for the convenience and brevity of description, the specific working processes of the above-described modules can refer to the corresponding processes in the foregoing method embodiments and will not be repeated here.

[0128] The modules described as separate components may or may not be physically separated. The components shown as modules may or may not be physical modules, that is, they may be located in one place or distributed across multiple network modules. Some or all of the modules can be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0129] In addition, the functional modules in each embodiment of this application can be integrated into a processing module, or each module can exist physically alone, or two or more modules can be integrated into one module. The above integrated modules can be implemented in the form of hardware, or in the form of hardware plus software functional modules.

[0130] The above integrated modules implemented in the form of software functional modules can be stored in a computer-readable storage medium. The above software functional modules stored in a storage medium include several instructions for causing a computer system (which can be a personal computer, a server, or a network system, etc.) or a processor to execute some steps of the methods described in each embodiment of this application. The foregoing storage medium includes: various media that can store program codes such as USB flash drives, mobile hard disks, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical discs.

[0131] Finally, it should be noted that: the above embodiments are only used to illustrate the technical solutions of this application, rather than to limit them; although this application has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that: they can still modify the technical solutions recorded in the foregoing embodiments, or perform equivalent replacements on some of the technical features; and these modifications or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of each embodiment of this application.< / video>

Claims

1. An extensible front-end instant messaging method, characterized in that: including, in response to a user's request to initiate a session at the front end, obtaining historical message data related to the session according to preset query conditions through an interface provided by the API server; establishing a two-way communication connection between the client and the message server based on the WebSocket protocol for receiving real-time message data; integrating the received real-time message data with the obtained historical message data based on the timestamp or unique identifier of the message to form a unified message sequence based on time series; by maintaining the unified message sequence and synchronizing the unified message sequence to the front-end user interface through a reactive data binding mechanism to achieve real-time update of data and interface, including, maintaining the unified message sequence based on time series by maintaining globally shared status data; the reactive data binding mechanism includes: defining reactive data attributes associated with the unified message sequence based on time series; when the globally shared status data changes, responding to the change to execute an update operation and synchronously updating the parts bound to the reactive data attributes in multiple user interfaces; providing a set of general interfaces through the IM Bridge layer for external systems to call to implement instant messaging functions, and the interfaces include interfaces for initiating one-on-one chat sessions and group chat sessions, interfaces for sending messages, interfaces for searching users, interfaces for registering custom message types, and interfaces for waking up the chat window with one key; the interface for registering custom message types includes, receiving a custom message type identifier and a corresponding message rendering function provided by an external system; the rendering function is defined by the external system according to its own needs; maintaining a mapping relationship between the message type identifier and the corresponding rendering function; when receiving a message, looking up the corresponding rendering function according to the message type identifier and using the found rendering function to render and display the message content to achieve external customization of the message content.

2. The scalable front-end instant messaging method according to claim 1, wherein: the preset query conditions include at least one of a session identifier, a time range, a message sender or receiver identifier, and a message type.

3. The scalable front-end instant messaging method according to claim 2, characterized in that: the "integrating the received real-time message data with the obtained historical message data based on the timestamp or unique identifier of the message to form a unified message sequence based on time series" includes, sorting the historical message data and real-time message data according to the timestamp; removing duplicates from the duplicate message data using the unique identifier; merging the sorted message data into the unified message sequence based on time series.

4. The scalable front-end instant messaging method according to claim 1, wherein: the "by maintaining the unified message sequence and synchronizing the unified message sequence to the front-end user interface through a reactive data binding mechanism" further includes, implementing the maintenance of the unified message sequence by adopting Vuex; Vuex is used to centrally manage the state of the front-end application and drive state changes in a predictable manner; the front-end user interface is constructed using a UI component library to unify the visual style of the front-end user interface; the UI component library is implemented using Ant Design.

5. The scalable front-end instant messaging method according to claim 1, wherein: also includes, the client periodically sends heartbeat messages to the message server; If the client does not receive other messages except the heartbeat message within the preset time, the client initiates a reconnection operation to maintain the two-way communication connection.

6. An electronic device, comprising a memory and a processor, characterized in that: The memory stores a computer program that can run on the processor. When the program is executed on the processor, it implements the steps in the scalable front-end instant messaging method according to any one of claims 1-5.

7. A storage medium storing a computer program, characterized in that: When the computer program is executed by the processor, it implements the steps in the scalable front-end instant messaging method according to any one of claims 1-5.

Images