Chat Messages Basics

In chat applications, messages serve as the core means of communication, being absolutely necessary in real-time interactions between users.

Using PubNub’s messaging capabilities and an SDK of your choice, you can send, receive, and manage messages efficiently, while also enhancing user engagement with features like typing indicators and emoji reactions.

Send chat messages

Sending messages is central to any chat application. With PubNub, messages are delivered efficiently, ensuring they reach users globally in under 30ms.

Messages can encapsulate text, user data, and custom metadata, enabling rich interactions and context-aware communication.

By structuring messages in JSON, applications can easily process and display diverse data types to enhance user engagement and functionality.

pubnub.publish({
  message: { "from": "user123", "message": "Hello, how are you?" },
  channel: 'chat-room',
}, (status, response) => {
  console.log(status, response);
});

Messages can include rich JSON content.

Typing indicators

Typing indicators enhance user experience by signaling when a participant in a chat is actively composing a message. This real-time feedback fosters a more dynamic and responsive conversation atmosphere.

By sending lightweight signals, typing status is conveyed across user devices, allowing for timely visual cues that improve the perceived immediacy and interactivity of the chat.

pubnub.signal({
  message: 'typing_on',
  channel: 'chat-room'
}, (status, response) => {
  console.log(status, response);
});

Receive messages

Real-time reception of messages in PubNub enables applications to maintain a seamless and continuous conversation flow.

By integrating listeners, applications can handle new messages as they arrive, update interfaces dynamically, and maintain synchronization across different user devices.

This capability is critical for delivering an uninterrupted chat experience and ensures that users are always in sync with the latest interactions.

pubnub.addListener({
  message: (message) => {
    console.log(message.channel, message.message, message.publisher);
  }
});

Message reactions and receipts

Adding reactions and read receipts provides users with additional context about their messages, such as acknowledgment of delivery or engagement through emojis.

This feature supports better communication by allowing users to react directly to messages with predefined emotions or confirming message receipt, thus adding a layer of interactivity and feedback to the conversation. It also enhances the social aspect of chat applications by enabling non-verbal acknowledgments.

pubnub.addMessageAction({
  channel: 'chat-room',
  messageTimetoken: '15610547826970040',
  action: { type: 'reaction', value: 'thumbs_up' },
}, (status, response) => {
  console.log(status, response);
});

Manage message history

Access to historical conversation data is vital for providing context and continuity in chat applications.

PubNub's Message Persistence feature allows developers to fetch and display past messages, maintaining the narrative and context for users joining ongoing discussions or returning to previous chats.

Efficient message retrieval supports applications in delivering a complete conversational experience, ensuring users have access to all necessary information at any time.

pubnub.fetchMessages({
  channels: ['chat-room'],
  includeMessageActions: true,
  count: 25
}, (status, response) => {
  console.log(response);
});

Unread message counts

Tracking unread messages is crucial for guiding user attention and ensuring no message goes unnoticed.

By implementing message counts, applications can visually cue users to new activity within chats, enhancing navigability and user engagement.

This feature provides clarity and assurance, helping users prioritize responses and manage their interactions effectively.

pubnub.messageCounts({
  channels: ['chat-room'],
  channelTimetokens: ['15518041524300251'],
}, (status, results) => {
  console.log(results);
});

File sharing

Incorporating the ability to send files, such as images, documents, or videos, extends the versatility of chat applications.

PubNub supports file uploads and transfers, allowing users to share media and files seamlessly within their chats.

This capability encourages richer communication forms and supports applications across various use cases from social networking to team collaboration.

const fileInput = document.querySelector('input[type=file]');

fileInput.addEventListener('change', async () => {
  const file = fileInput.files[0];
  await pubnub.sendFile({
    channel: 'chat-room',
    file
  });
});

Update and delete messages

While maintaining message integrity is important, providing users with the ability to update or delete messages adds flexibility and control.

Soft deletions and message edits can be handled to give users control over their shared content, while also supporting compliance needs with message deletion from server records when necessary.

These features let chat app users manage their communication effectively and responsibly.

// Soft delete
pubnub.addMessageAction({
  channel: 'chat-room',
  messageTimetoken: '15610547826970040',
  action: { type: 'deleted', value: '.' },
}, (status, response) => {
  console.log(status, response);
});