Before we start building our own live chat system, we need to consider a few questions 🤔 :

  • What is the size of the user? How to expand capacity?
  • User distribution area?
  • How to ensure that messages (low latency, must) arrive?

Anyone who has done IM or signaling knows that real-time transmission has high requirements on the server. Social apps, for example, process hundreds or thousands of text and image transfers every second. In the case of weak network packet loss, the integrity of the message must be ensured and the message must be delivered. The technical principles and solutions are beyond the scope of a WebSocket.

As far as message must reach is concerned, the system must have multiple active links as well as preferred link capability. For example, if one link is down, the message may not be delivered. However, the real environment is often worse and more cruel than the ideal environment we imagine. At the same time, we also have to face: network packet loss, user index increase and failure, and even system downtime and so on.

Therefore, what kind of chat system to build depends on the needs of our products, according to the number of cluster deployment, node distribution and many other factors.

Characteristics of real-time chat systems

  • High concurrency
  • Low latency
  • The message will reach
  • Weak network resistance
  • Cluster deployment
  • Message Push (optional)

Real-time chat system should have functions

  • Point-to-point messaging
  • Group messaging
  • Call to invite

At present, social APP plays very rich, provide text and text transmission and add real-time communication module, derived from the live broadcast, host PK and many other plays, a large part of which are completed through customized real-time messages. Take A simple example: wechat phone: USER A sends A message with status to USER B. After user B receives or hangs up the message, the status will be locked and cannot be changed. The system then sends the result to User A. This process is called call invitation.

In short, real-time messaging not only facilitates communication, but also helps us enrich our business processes.

Vue3 + Tailwind + RTM = Real-time chat system

Project description

The project 0 business code, so we can only specify a few fixed channel rooms to demonstrate the group message, if necessary, we can connect with their own business system to replace the random avatar, random nickname, personality signature and other data in the project; Improve point-to-point messaging, call invitation and other functions; It is also possible to broadcast more complex situations through RTM’s custom messages.

The source code

Please check the source code

  • GitHub Demo
  • Gitee Demo

Build Vue3 projects using Vite

Build a Vue3 project using Vite, refer to the official documentation for details. Create a project

# NPM 6. X NPM init @vitejs/app my-chat-app --template vue # NPM 7+  npm init @vitejs/app my-chat-app -- --template vue # yarn yarn create @vitejs/app my-chat-app --template vueCopy the code

Install dependencies

cd my-chat-app

npm install
npm run dev
Copy the code

TailWind + TailWindComponents = UI

Why did we choose TailwindCSS? Tailwind CSS not only saves time writing CSS, but also avoids naming annoyances, and Tailwind Components come with a lot of free UI components (developed using Tailwind), so why not find some ready-made UI components? For example: here are some chat related components we found from tailwindComponents.

Install tailwindcss

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Copy the code

Automatically generates tailwind configuration files

npx tailwindcss init -p
Copy the code

Tailwindcss configuration here does not do the code porter, details please refer to the official documentation, Chinese please refer to the Chinese documentation.

Integrate RTM module

Please check the official documents of the RTM SDK used by the project, and you can replace it according to your needs.

Install the RTM

npm install ar-rtm-sdk -D
Copy the code

Import the RTM SDK

import ArRTM from "ar-rtm-sdk"
Copy the code

Creating a Client

Const rtmClient = arrtm.createInstance (config.rtm_app_id, {// Set the log level logFilter: arrtm.log_filter_off});Copy the code

Log in to the RTM system

Const randomUserId = "+ math.ceil (math.random () * math.pow (10, 10)); const uid = await rtmClient.login({ uid: randomUserId });Copy the code

Join a group & Listen to group message callback

Const rtmChannel = rtmClient.createchannel (group.groupid); // Create group const rtmChannel = rtmClient.createchannel (group.groupid); // join group await rtmchannel.join (); Rtmchannel. on("ChannelMessage", (message, peerId, MessagePros) => {if (message.text) {// Parse message contents const msgObj = json.parse (message.text); // TODO... (for example, displaying a message on a page)}});Copy the code

According to business development

  • Point-to-point message After interconnecting with a service system, you can log in to the RTM using the UID of the service and send point-to-point messages based on the UID.
  • Real-time audio and video call After connecting to the service system, you can invite a user with a specified UID to join the same audio and video communication room after receiving the call. The prerequisite is that the project needs to integrate audio and video communication modules.