At present instant messaging has become the main function of most products. Recently, we need to develop a customer service function with basic communication function. According to the development process of this function, summed up some development experience and methods (using different SDK, implementation methods will be relatively big difference). I have never touched the development of this kind of function before, so I don't know whether the internal function is very complicated. If only to achieve a basic version of the chat function, in fact, not complex, just need to do a good job of interaction, the basic function can be completed.Copy the code

The premise to prepare

  • Mature instant messaging service
  • Callable SDKS with easy-to-understand documentation
  • Personnel who can provide answers to questions

Function introduction

  • Can realize text, picture send and receive
  • Multiple people chat online at the same time
  • Record chat list and history, support action list
  • Support to withdraw, download pictures

The core function

Development process: SDK login -> SDK listening -> Vuex management data -> page listening data -> Show new messages

The message list

The first two steps are the SDK methods provided by the communication service, which are used to connect the service and establish a session. Our main content is data processing and presentation. (The first two steps can be time-consuming if you don’t have enough preparation.)

From the listener to our page display, the data needs to be reassembled because they serve many projects, so inevitably there will be a lot of parameters returned that we don’t need, as well as some fields we can add that we need to use. With a familiar data structure, we can judge what can be done based on the structure. Whenever the SDK listening method is triggered, the data is reorganized and stored in Vuex. The page listening method detects that the data in Vuex has changed, and adds the modified data to the array prepared in advance and renders it on the page, so as to realize the first step of real-time chat, data display. However, data display alone is not enough, we have several necessary functions in the use of wechat:

1. Drop down load history message 2. Withdraw message 3. Chat list: Message prompt, delete chat, etc. 5. Offline message displayCopy the code

The above several have been implemented in this development, I will introduce one by one:

Pull down loads to get history messages

Compared with wechat, it is not difficult to find that every time the message is pulled down, the historical message will just stay at the distance of the next data from the top, so that users will not have to find the position they just read every time they pull down the message.

Realization idea: By obtaining the height difference between the scroll elements before and after the pull down, set the distance of the scroll bar to roll.

Key steps// Get the DOM of the scroll element
const dom = document.getElementById("scrollBox");
// Drop down the height of the scroll bar before
const stepHeight = dom.scrollHeight;

// A drop-down operation triggers the interface to load data
// ...

// Get the scrollbar height of the loaded element
this.$nextTick(() = > {
    const dom2 = document.getElementById("scrollBox");
    dom2.scrollTo(0, dom2.scrollHeight - stepHeight); // Scroll to the previous height
})
Copy the code

Long press to withdraw

Define a directive longpress.js

Register the directive on the page, and then add the action method to the label that displays the message.

// Note that since THE messages are written separately as components, I can call the incoming data directly, without passing it through function inputs
<div v-longPress="touchinBroker">{{ message.content }}</div>

touchinBroker() {
    // Process data retractions
    this.$emit("setMessage".this.message.id);
}
Copy the code

Download the pictures

The image returned by the communication service needs to be obtained through the GET method in AJAX (some parameters need to be passed in). The image obtained is base64 format data.

Originally, I planned to directly download the image function by right-clicking the browser, but I found that the download was a Base64 file, not a picture, so I still need to write a download function by myself. The function logic is relatively simple, which is to create a canvas, display the picture with canvas, and then download the screenshot. The code is as follows:

export function downloadBase64Img(base64Data) {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    const MINE_TYPE = "image/png";
    const img = new Image();
    
    img.src = base64Data;
    img.onload = () = > {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0.0, img.width, img.height);
        
        const imgUrl = canvas.toDataUrl(MINE_TYPE);
        const alink = document.createElement("a");
        
        alink.download = "img";
        alink.href = imgUrl;
        alink.dataset.downloadurl = [MINE_TYPE, alink.download, alink.href].join(":");
        
        document.body.appendChild(alink);
        alick.click();
        document.body.removeChild(alick); }}Copy the code

Chat list

Since the IM service we use is a project developed by our company, few projects are using it, so the functions provided are not perfect

Chat lists are not as easy to implement as I first thought.

I thought it was just a list, and my department didn’t have much trouble making it. In fact, whenever a message is recorded, the list is updated synchronously, so there are many places in the chat that need to be updated by calling the interface. And we needed to communicate with the back end how to design the list of additions, deletions, changes and checks, which took a lot of time in development and testing. If the SDK could provide a list of customer service, the code would be much simpler and the page would remove a lot of logic so that more time could be spent implementing ancillary functions like sending emojis, forwarding messages, etc…

Offline message

After each login, the listening method checks for offline messages. With this approach, we set up a method on the page that listens only once, similar to the flow that listens for messages.

conclusion

  1. Do function pre-research before development.
  2. Taking advantage of the methods provided by the SDK can save a lot of time.
  3. When it comes to message-related methods, it’s best to let the service provider provide the methods, and it’s easy to do it yourself.
  4. If there is a key function, the service does not meet the requirements, then you need to carefully choose whether to continue to use the service, after all, after the completion of development, you still have to fill in the hole.
  5. Interaction is very important, if the interaction is not good, is equal to the page full of bugs, pit is also their own.
  6. The interaction provided by designers may not be perfect, so we can learn from other chat software. The benchmark in this field is very good, which can provide many ideas. The development should not only focus on the implementation of the code, but also need to pay attention to user experience.