Extensible front-end instant messaging method, electronic equipment and storage medium

Abstract

The invention relates to an extensible front-end instant messaging method, electronic equipment and a storage medium, and the method comprises the steps: obtaining historical message data related to a session through an interface provided by an API server according to a preset query condition in response to a request that a user initiates the session at a front end; based on a WebSocket protocol, two-way communication connection is established between the client and the message server for receiving real-time message data; based on the timestamps or unique identifiers of the messages, integrating the received real-time message data with the acquired historical message data to form a uniform message sequence based on a time sequence; by maintaining the unified message sequence and synchronizing the unified message sequence to a front-end user interface through a response type data binding mechanism, real-time updating of data and an interface is achieved. A universal interface is provided through the bridging layer, integration with other systems is facilitated, and the expandability of the system is enhanced.

Description

Technical Field

[0001] The present invention relates to the field of Internet communication technology, and in particular to an expandable front-end instant messaging method, electronic equipment and 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 growing. Traditional instant messaging solutions are mainly based on the client-server architecture. The client maintains communication with the server through polling or long connection to achieve real-time sending and receiving of messages. However, the existing technology still has some defects in front-end implementation: First, traditional Web instant messaging solutions usually rely on frequent HTTP requests for data interaction, which leads to excessive server load, especially in high-concurrency scenarios, which easily causes delays and performance bottlenecks, and it is difficult to meet users' needs 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 manage and display them efficiently on the front end is still a challenge.

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

[0004] In addition, existing instant messaging solutions usually require a lot of customized development when integrating with other systems, resulting in high system coupling and difficulty in maintenance and expansion. How to provide a set of universal interfaces to facilitate the rapid integration of instant messaging functions in other systems is an urgent problem to be solved.

[0005] Finally, existing instant messaging solutions have certain limitations in the scalability of message types. They usually only support basic message types such as text and pictures, which makes it difficult to meet users' needs for customized message types. How to provide a flexible extension mechanism to support users to customize message types as needed is also an important research direction.

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

[0007] The purpose of the present invention is to provide an expandable front-end instant messaging method, electronic device and storage medium to solve the problems of high server load and high maintenance cost in the prior art.

[0008] To achieve one of the above-mentioned purposes, an embodiment of the present invention provides an extensible front-end instant messaging method, the method comprising: In response to a user's request to initiate a session on the front end, historical message data related to the session is obtained according to preset query conditions through the interface provided by the API server; Based on the WebSocket protocol, a two-way communication connection is established between the client and the message server to receive real-time message data; Based on the timestamp or unique identifier of the message, the received real-time message data is integrated with the acquired historical message data to form a unified message sequence based on time sequence; By maintaining the unified message sequence and synchronizing the unified message sequence to the front-end user interface through a responsive data binding mechanism, real-time updates of data and interfaces can be achieved.

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

[0010] 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 acquired historical message data based on the timestamp or unique identifier of the message to form a unified message sequence based on time sequence” includes, Sort historical message data and real-time message data according to timestamps; Use unique identifiers to deduplicate duplicate message data; The sorted message data are merged into the unified message sequence based on time sequence.

[0011] 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 responsive data binding mechanism” includes: Maintaining the time-based unified message sequence by maintaining globally shared state data; The responsive data binding mechanism includes: defining responsive data attributes associated with the timing-based unified message sequence; When the globally shared state data changes, an update operation is performed in response to the change, and portions of multiple user interfaces bound to the responsive data attributes are synchronously updated.

[0012] As a further improvement of an embodiment of the present invention, the method further includes: the “maintaining the unified message sequence and synchronizing the unified message sequence to the front-end user interface through a responsive data binding mechanism” also includes: The unified message sequence is maintained 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.

[0013] As a further improvement of an embodiment of the present invention, the method further includes the client periodically sending a heartbeat message to the message server; If the client does not receive any message other than the heartbeat message within a preset time, the client initiates a reconnection operation to maintain the two-way communication connection.

[0014] As a further improvement of an embodiment of the present invention, the method also includes providing a set of general interfaces through the IM Bridge layer for external systems to call to implement instant messaging functions, wherein the interfaces include interfaces for initiating single 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 chat windows with one click.

[0015] As a further improvement of an embodiment of the present invention, the method further includes: the interface for registering a custom message type includes: 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; Maintain the mapping relationship between message type identifiers and corresponding rendering functions; When a message is received, the corresponding rendering function is searched according to the message type identifier, and the found rendering function is used to render and display the message content, thereby realizing external customization of the message content.

[0016] To achieve one of the above-mentioned purposes of the invention, an embodiment of the present invention further provides an electronic device, comprising a memory and a processor, characterized in that the memory stores a computer program that can be run on the processor, and when the program is executed on the processor, the steps in the scalable front-end instant messaging method as described above are implemented.

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

[0018] Compared with the prior art, the present invention provides an extensible front-end instant messaging method, electronic device and storage medium, which effectively improves the user experience of instant messaging by integrating historical messages and real-time messages and efficiently managing and displaying them on the front end. The front-end state management and UI component library are adopted to reduce the front-end development and maintenance costs and improve the development efficiency. The universal interface is provided by the bridge layer, which facilitates the integration with other systems and enhances the extensibility of the system. Customized message types are supported to meet the diverse needs of users and enhance the competitiveness of the product. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] Figure 1 It is an overall flow chart of the scalable front-end instant messaging method described in the present invention. DETAILED DESCRIPTION

[0020] The present invention will be described in detail below in conjunction with the specific embodiments shown in the accompanying drawings. However, these embodiments do not limit the present invention, and any structural, methodological, or functional changes made by a person skilled in the art based on these embodiments are all within the scope of protection of the present invention.

[0021] The embodiments of the present invention are described in detail below, and examples of the embodiments are shown in the accompanying drawings, wherein the same or similar reference numerals throughout represent the same or similar elements or elements having the same or similar functions. The embodiments described below with reference to the accompanying drawings are exemplary and are only used to explain the present invention, and cannot be understood as limiting the present invention.

[0022] In the first embodiment of the present invention, the present invention provides an extensible front-end instant messaging method, such as Figure 1 As shown, the method includes, S1: In response to a user's request to initiate a session on the front end, historical message data related to the session is obtained according to preset query conditions through an interface provided by the API server; S2: Based on the WebSocket protocol, a two-way communication connection is established between the client and the message server to receive real-time message data; S3: Based on the timestamp or unique identifier of the message, the received real-time message data is integrated with the acquired historical message data to form a unified message sequence based on time sequence; S4: Maintain the unified message sequence and synchronize the unified message sequence to the front-end user interface through a responsive data binding mechanism to achieve real-time update of data and interface.

[0023] In a specific implementation of the present invention, the preset query condition includes at least one of a session identifier, a time range, a message sender or receiver identifier, and a message type.

[0024] 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 actual application scenarios, including but not limited to the following types: Conversation ID: It is used to uniquely identify a conversation, such as the ID of a single chat conversation or the ID of a group. By specifying a conversation identifier, you can retrieve all messages in a specific conversation. For example, in a single chat scenario, the conversation identifier can be a combination of two user IDs; in a group chat scenario, the conversation 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 conversation.

[0025] Time Range: It is used to limit the time range of messages, such as specifying the start time and end time. By specifying the time range, you can retrieve messages within a specific time period. For example, users can query message records within the past 24 hours, or query message records within a specific date range. The time range can be accurate to the second or millisecond level to meet different query accuracy requirements.

[0026] Sender / Receiver ID: Used to specify the sender or receiver of a message. By specifying a sender ID, you can retrieve all messages sent by that user; by specifying a receiver ID, you can retrieve all messages sent to that user. This method is often used by users to find specific messages they have sent or received. For example, users can find messages they have sent to a specific user, or find messages a specific user has sent to them.

[0027] Message Type: Used to specify the type of message, such as text message, picture message, voice message, video message, file message, etc. By specifying the message type, you can retrieve messages of a specific type. For example, a user can only view all picture messages in a conversation, or only view all voice messages. This method allows users to quickly filter specific types of information.

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

[0029] In a specific implementation scenario of the present invention, historical messages, department structures, and user information are obtained from the Api server through ajax requests. 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 session list and the personnel structure list.

[0030] Real-time messages interact with the message server through web socket sockets, and a connection is created through new WebSocket(url), including: Listen for the message event to obtain the messages pushed by the server; Listen for the onclose event to achieve reconnection when disconnected; Send messages to the server through the send method of the socket instance.

[0031] 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 already obtained historical message data to form a unified message sequence based on time series. Specifically, Sort the historical message data and real-time message data according to the timestamp; Use the unique identifier to remove duplicate message data; Merge the sorted message data into the unified message sequence based on time series.

[0032] Furthermore, sort the historical message data and real-time message data according to the timestamp: First, obtain the 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 real-time message data according to the timestamp respectively. The purpose of sorting is to ensure that the messages are arranged in chronological order, thus avoiding time confusion. The precision of the timestamp should be consistent. For example, all use millisecond-level timestamps to ensure the accuracy of sorting. If the timestamp precisions of historical messages and real-time messages are inconsistent, unified conversion is required.

[0033] Going a step further, duplicate message data is deduplicated using a unique identifier: In an instant messaging system, duplicate messages may appear due to network fluctuations, message retransmission, and other reasons. In order to avoid displaying the same message repeatedly on the user interface, deduplication is required. Each message object should contain a unique identifier that uniquely identifies a message. Before or after integrating historical messages and real-time messages, data structures such as hash tables and sets can be used to deduplicate messages using unique identifiers as keys. 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.

[0034] Furthermore, the sorted message data is merged into an ordered message sequence: 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, it is still necessary to compare and insert 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.

[0035] In a specific implementation scenario of the present invention, the Message structure includes a responseHeader and a responseBody; responseHeader includes currMilis, responseType, sessionld, version; responseBody includes ackld, conversationType, lastMsgld, moreMsgFlag, msgCount, msgList; The responseType in the responseHeader determines what operation the client needs to perform and enters different processing flows. The message body is in the responseBody. responseType includes 90001: successful login, 90004: client synchronization message, 90003: successful message sending, 90005: message receiving, 90006: successful sending of read mark, 90007: message reading by the other party, 90011: successful creation of group chat, 90012: successful addition of group chat members, 90013: successful deletion of group chat members, 90015: successful modification of group chat members, 90017: triggered work message, 90018: successful withdrawal of message.

[0036] The following is the processing flow when receiving a responseType value of 90005: 1) Take the message data from msgList. The message data structure is: Messageltem: appName, content, conversationType, iconUr, msgld, msgStatus, msgType, receiverld, sendTime, senderld; Among them, conversineType is the chat type, including private chat, group chat, system message, and AI message; msgType is the message type, including text, picture, voice, video, geographic location, file, notification, prompt, intelligent dialogue robot, and custom message type; senderId is the sender's ID; receiverId is the receiver's ID; Content is the chat content.

[0037] 2) When receiving a message, determine a conversation based on conversineType, senderId, and receiverId. If a conversation already exists, directly add the corresponding conversation to msgItem; if no conversation exists, create a new conversation and add it to the conversation list; 3) When rendering message details, the message window renders different UIs according to msgType, such as text, pictures, videos, etc.: First, register the built-in message types, including revoke, text, image, sound, link, group, system, location, work, article, file, video, and time, a total of 13 built-in types, and map the message types and message components; Because a single message may be operable (download, forward, withdraw) or inoperable, such as: system type messages are inoperable, ordinary messages are operable (forward and withdraw), and file messages can be downloaded, the invention customizes the basic message UI layout BaseMessageLayout, and customizes the operable container BaseOptionalLayout and the file container BaseFileLayout. When a single message reaches BaseMessageLayout, it will determine what type of UI to render based on the message type registered above through the rendering function of BaseMessageLayout; 4) When sending a message, get the input message content through the input box, build msgItem according to different message types, and send it back to the server through the send method of websocket.

[0038] In a specific embodiment of the present invention, the unified message sequence is maintained and synchronized to the front-end user interface through a responsive data binding mechanism. Maintaining the time-based unified message sequence by maintaining globally shared state data; The responsive data binding mechanism includes: defining responsive data attributes associated with the timing-based unified message sequence; When the globally shared state data changes, an update operation is performed in response to the change, and portions of multiple user interfaces bound to the responsive data attributes are synchronously updated.

[0039] The unified message sequence is maintained 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.

[0040] It should be noted that the responsive 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 techniques such as observer mode and data hijacking to achieve efficient responsive updates. When responsive data attributes associated with a unified message sequence are defined in a front-end user interface component, the framework "hijacks" these attributes, that is, it uses specific methods internally (intercepts read and modify operations on these attributes. When the user interface component is rendered for the first time, the framework tracks which parts of the component "depend on" these responsive 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 attribute. The framework records these dependencies. When the unified message sequence changes (for example, a new real-time message is received through WebSocket and added to the message sequence), the framework detects the change (because the data attribute is "hijacked"). The framework immediately notifies all components that "depend on" the message sequence. The components that receive the notification will perform update operations and re-render themselves, so that the latest message content is displayed in the user interface.

[0041] It should be noted that Vuex is a state management mode + library developed specifically for Vue.js applications. The state of all components of the application is managed by centralized storage, and the corresponding rules are used to ensure that the state changes in a predictable way. In this solution, Vuex is mainly used to manage the following states: User state: including the ID, user name, avatar and other information of the currently logged-in user. Session list: including information of all sessions in which the user participates, such as session ID, session type, session name, 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 confusion of state transmission 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 Vuex's mutation, and then the component automatically responds to the update, thereby realizing the real-time display of the message.

[0042] It should be noted that Ant Design is an enterprise-level UI design language and React component library. Ant DesignVue is the Vue.js implementation of Ant Design, which provides 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.

[0043] In a specific implementation scenario of the present invention, the UI is implemented based on Vue / ant-design and the interactive response of the global data UI is completed through Vuex, including private chat window, group chat window, sending SMS, organizational structure address book, etc.; This implementation scenario maintains a Vuex instance of a window UI, where the state includes: currentUsers: current user information, deptList: department personnel list, hisSessions: main panel conversation list, chattingList: chat pop-up conversation list, chattingItem: current conversation.

[0044] In this way, you only need to use the state synchronization function of vuex to modify one place and synchronize the UI in multiple places. For example, when receiving a new message, you need to pin the conversation to the main panel message list, chat pop-up conversation list, and current chat window. You only need to modify the corresponding positions in hisSessions, chattingList, and chattingItem. At the same time, a unified style of the chat UI interface, such as buttons and pop-up window styles, is completed through a third-party component library; and corresponding components are imported on demand to reduce the size of the packaged file: only the components used in this implementation scenario are imported, and unused components are removed by importing them one by one and using the tree shaking function of webpack.

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

[0046] It should be noted that, in order to ensure the validity of the connection, if no message other than the heartbeat message (90002) is received after 60 seconds, the heartbeat reconnection mechanism is started and a message with requestType=2 is sent to the message server.

[0047] In a specific embodiment of the present invention, a set of general interfaces is provided through the IM Bridge layer for external systems to call to implement instant messaging functions, including interfaces for initiating single 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 chat windows with one click.

[0048] 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, allowing external systems to easily integrate instant messaging functions without having to worry about the internal implementation details of the instant messaging system. Its main advantages include: 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 API provided by IM Bridge, without directly operating the internal components of the instant messaging system, reducing the complexity of the system and facilitating future maintenance and upgrades. Standardized interface: The IM Bridge layer provides a set of standardized APIs, defines a unified request and response format, and facilitates the integration of different external systems. Even if the internal implementation of the instant messaging system changes, as long as the API of IM Bridge remains unchanged, the external system does not need to make any modifications. Simplified integration: External systems only need to call the API 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, which greatly simplifies the integration process and reduces development costs. Improved scalability: Through the IM Bridge layer, the functions of the instant messaging system can be easily expanded, such as adding new message types, supporting new communication protocols, etc. These extensions are transparent to the external system and will not affect its normal operation.

[0049] It should be noted that custom message types allow developers to expand the types and display methods of messages according to actual needs, such as supporting the sending of non-text messages such as pictures, videos, and files. Its implementation details and advantages include: Flexible message rendering: By registering a custom message rendering component or rendering function, you can flexibly control the display of different types of messages. For example, picture messages can be displayed using Label shows that video messages can be used <video>Tag playback, file messages can provide download links. Easy to expand: When you need to support new message types, you only need to register new message type identifiers and corresponding rendering components or rendering functions, without modifying the core code of the instant messaging system, which improves the scalability of the system. Enhanced user experience: Supporting a variety of message types can enhance the user experience and make communication more vivid and diverse.

[0050] In a specific implementation scenario of the present invention, by implementing the IM Bridge bridging layer, encapsulating IM function points, and exposing interfaces to the outside, providing functions such as initiating chats, forwarding manuscripts, and initiating group chats, it is convenient for CMS, RM and other systems to call them with one click based on the original code; IM Bridge's API includes $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(), registerMessage(component, config).

[0051] Among them, init(params) is used to configure the IM server, including business system and message system links, to reduce the coupling degree of IM to a certain system; sendSMS is used to call up the SMS sending window; startChat is used to directly call up the private chat window, and the parameter is the specified conversation; startGroupChat is used to directly call up the group chat window. If session has a value, it will add new members (userIds) to the current group chat conversation; searchUser is used to search for users, and the results are displayed in the user list of the main panel; pickConversation is used to directly call up the conversation selection pop-up window; shareArticle is used to pop up the conversation selection pop-up window to directly share the manuscript to the corresponding conversation; sendMessage is used to directly send messages; addConversation is used to directly add the conversation to the chat window conversation list; registMessage is used to register custom messages; When the im sdk is connected to the project, a global $nfIM object will be mounted. All exposed APIs are mounted on this object. The basic registration method only needs to pass in the Socket server link and the API server link, as follows: $nfIM.init({ WS_API_URL: `API server link`, WS_URL: `Socket server link`, }); After registration is completed, it can be called directly.

[0052] In a specific embodiment of the present invention, the interface for registering a custom message type is specifically, 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; Maintain the mapping relationship between message type identifiers and corresponding rendering functions; When a message is received, the corresponding rendering function is searched according to the message type identifier, and the found rendering function is used to render and display the message content, thereby realizing external customization of the message content.

[0053] In a specific implementation scenario of the present invention, a function of providing a custom message type based on a Vue rendering function is used as follows: IM Bridge provides a registMessage API with parameters of component and config. In Vue projects, the parameter component can be directly passed into the Vue component. If it is in other frameworks or native projects, use the rendering function: $nfIM.registMessage({ props: ['message'], render(h) { return h('div', this.message.content); } }, {msgType: 'custom1'}) The internal implementation maintains a message type registry to map message types (including built-in and custom types) to corresponding components. When the server message reaches BaseMessageLayout, the render method of BaseMessageLayout will take out the corresponding type message component according to msgType, and pass the message as Prop to the component, at which time the message will be rendered to the corresponding page.

[0054] In a second embodiment of the present invention, the present invention provides an electronic device, comprising a memory and a processor, wherein the memory stores a computer program that can be run on the processor, and when the program is executed on the processor, the steps in the scalable front-end instant messaging method as described above are implemented.

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

[0056] In summary, the present invention provides an extensible front-end instant messaging method, electronic device, and storage medium, which effectively improves the user experience of instant messaging by integrating historical messages and real-time messages and efficiently managing and displaying them on the front end. The front-end state management and UI component library are adopted to reduce the front-end development and maintenance costs and improve development efficiency. The universal interface is provided by the bridge layer, which facilitates integration with other systems and enhances the scalability of the system. Customized message types are supported to meet the diverse needs of users and enhance the competitiveness of the product.

[0057] It should be understood that although this specification is described according to implementation modes, not every implementation mode contains only one independent technical solution. This description of the specification is only for the sake of clarity. Those skilled in the art should regard the specification as a whole. The technical solutions in each implementation mode may also be appropriately combined to form other implementation modes that can be understood by those skilled in the art.

[0058] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working process of the modules described above can refer to the corresponding process in the aforementioned method implementation, and will not be repeated here.

[0059] The modules described as separate components may or may not be physically separated, and the components shown as modules may or may not be physical modules, that is, they may be located in one place or distributed on multiple network modules. Some or all of the modules may be selected according to actual needs to achieve the purpose of the present implementation scheme.

[0060] In addition, each functional module in each embodiment of the present application can be integrated into one processing module, or each module can exist physically separately, 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.

[0061] The above-mentioned integrated module implemented in the form of a software function module can be stored in a computer-readable storage medium. The above-mentioned software function module is stored in a storage medium, including a number of instructions for a computer system (which can be a personal computer, a server, or a network system, etc.) or a processor to perform some steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM), random access memory (RAM), disk or optical disk and other media that can store program codes.

[0062] Finally, it should be noted that the above implementation modes are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned implementation modes, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned implementation modes, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the various implementation modes of the present application.< / video>

Claims

1. An extensible front-end instant messaging method, characterized in that: include, In response to a user's request to initiate a session on the front end, historical message data related to the session is obtained according to preset query conditions through the interface provided by the API server; Based on the WebSocket protocol, a two-way communication connection is established between the client and the message server to receive real-time message data; Based on the timestamp or unique identifier of the message, the received real-time message data is integrated with the acquired historical message data to form a unified message sequence based on time sequence; By maintaining the unified message sequence and synchronizing the unified message sequence to the front-end user interface through a responsive data binding mechanism, real-time updates of data and interfaces can be achieved.

2. The scalable front-end instant messaging method according to claim 1, characterized in that: The preset query condition includes 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 acquired historical message data based on the timestamp or unique identifier of the message to form a unified message sequence based on time sequence" includes: Sort historical message data and real-time message data according to timestamps; Use unique identifiers to deduplicate duplicate message data; The sorted message data are merged into the unified message sequence based on time sequence.

4. The scalable front-end instant messaging method according to claim 3, characterized in that: The "maintaining the unified message sequence and synchronizing the unified message sequence to the front-end user interface through a responsive data binding mechanism" includes: Maintaining the timing-based unified message sequence by maintaining globally shared state data; The responsive data binding mechanism includes: defining responsive data attributes associated with the timing-based unified message sequence; When the globally shared state data changes, an update operation is performed in response to the change, and portions of multiple user interfaces bound to the responsive data attributes are synchronously updated.

5. The scalable front-end instant messaging method according to claim 4, characterized in that: The “maintaining the unified message sequence and synchronizing the unified message sequence to the front-end user interface through a responsive data binding mechanism” also includes: The maintenance of the unified message sequence is achieved by adopting Vuex; Vuex is used to centrally manage the state of the front-end application and drive state changes in a predictable way; 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.

6. The scalable front-end instant messaging method according to claim 1, characterized in that: Also includes, The client periodically sends heartbeat messages to the message server; If the client does not receive any message other than the heartbeat message within a preset time, the client initiates a reconnection operation to maintain the two-way communication connection.

7. The scalable front-end instant messaging method according to claim 1, characterized in that: Also includes, A set of common interfaces is provided through the IM Bridge layer for external systems to call to implement instant messaging functions, including interfaces for initiating single 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 click.

8. The scalable front-end instant messaging method according to claim 7, characterized in that: The interface for registering a custom message type includes: 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; Maintain the mapping relationship between message type identifiers and corresponding rendering functions; When a message is received, the corresponding rendering function is searched according to the message type identifier, and the found rendering function is used to render and display the message content, thereby realizing external customization of the message content.

9. An electronic device, comprising a memory and a processor, characterized in that: The memory stores a computer program that can be run on the processor, and when the program is executed on the processor, the steps in the scalable front-end instant messaging method as described in any one of claims 1-7 are implemented.

10. A storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the steps in the scalable front-end instant messaging method as described in any one of claims 1 to 7 are implemented.

Images