Chat App (with Image/PDF Sending and Video Call Features)

Purpose of Creating the Demo App

I had an opportunity to build a closed SNS, and during that time I conducted technical research on real-time communication.

For this project, I built a real-time messaging mechanism using an OSS called Socket.io, which is based on WebSockets. The concept is something similar to Slack, Chatwork, or Discord.

I implemented the minimum set of features generally required for a chat app, excluding customer-specific requirements, and will introduce it here as a demo application.

After the feature overview, I also summarize what kind of work was done and over what period it was implemented, so I hope this will serve as a reference if you consider asking our company to build an app with similar requirements.

Overview of the App

Creating a Site

First, you create a site. A “site” serves as a container that groups channels where messages are exchanged according to a particular theme or purpose. After creating a site, you invite users and then exchange messages in each channel.

When creating a site, you set a site name and an icon. These settings can be changed later.

Once a site is created, a text channel named #general will appear.

Inviting Users

You can invite users to the site you created. You share the generated invitation link via email or similar means, and clicking it allows access to the site.

Ideally, the app should also include an email-sending feature, but this has been omitted this time due to time constraints.

This app also supports dark mode, and you can switch it according to your preference.

Sending Messages

Sending messages is very simple: enter text in the input field and press “Shift + Enter” to send. By using a communication technology called WebSockets, messages are delivered in real time to users participating in the site.

In this video, different users are shown on the left and right.

You can see that when the user on the left enters and sends a message, it immediately appears for the user on the right.

There is also an icon on the right side of the input field; clicking it displays a list of emojis, allowing you to attach emojis to your messages.

As a channel is used over a long period, the number of messages increases, so the range of messages fetched on initial screen display is limited (only a dozen or so messages starting from the latest timestamp). When reading older messages, you scroll up, and at that timing additional past messages are loaded. This implementation balances performance and usability.

Sending Images and PDFs

In addition to text, you can also send images and PDFs.

For PDFs, the file name is displayed, and clicking it opens a new window where you can view the contents.

Editing and Deleting Sent Messages

You can edit or delete messages, images, and PDFs that you yourself have sent.

When a message is deleted, it is replaced with the text “This message has been deleted.”

Editing and Deleting Sent Messages

Sent messages can be edited, and when edited, the label (edited) is attached so that it is clear the message has been modified.

You can also delete sent messages, and when deleted, they are replaced with the message This message has been deleted.

Images and PDFs can also be deleted.

Creating Channels

If all communication is done in the #general channel, it becomes difficult to find past messages. It is therefore better to prepare channels for communication according to specific purposes or use cases. That is the role of channel creation.

Up to now, I have described channels intended for text-based communication, but you can also create dedicated channels for video calls.

Video Calls

If you create a channel with the type set to “video call” and click that channel, the interface switches to a video call. When another user clicks the same channel, they join the room and can start a conversation.

You can see each other via cameras connected to your computers, and you can also share materials. In business situations, there are often cases where text messages alone are not sufficient, but by using video calls in such cases, you can achieve smoother communication.

There is another channel type called “voice call.” It is similar to video calls, but when connected, the camera is off and the channel is mainly for audio communication.

Searching Channels

If you create many channels of various types, visibility may suffer. In such cases, you can use channel search. There is a search icon in the upper left; click it or press “Ctrl + K” to open the search screen.

Once you find the channel you were looking for, click it to display that channel.

One-on-One Messaging

The channels introduced so far are open spaces. When exchanging private information, you use the one-on-one messaging feature (direct messages).

Only the relevant users can access these, but otherwise, features such as sending, editing, and deleting messages work the same as in channels.

Video calls are also available here. While video calls are also possible in channels, anyone who can access the channel can join, so if you want to communicate individually, it is better to use video calls within direct messages.

Member Management

After creating a site, you invited users, but you can also remove invited users. From the “Member Management” menu in the upper left, select the target user and click “Remove from site” to exclude them.

Permission Management

You can also change the permissions of participating members. There are three types of roles: “Admin,” “Moderator,” and “Guest.”

Admin: The person who created the site

Guest: Invited users

Moderators can be set by changing a Guest’s role via the permission change menu.

What each role can do is as follows:

Permission	Admin	Moderator	Guest
Send messages	○	○	○
Edit/Delete messages	All users’	All users’	Own only
Create channels	○	○	×
Edit/Delete channels	○	○	×
Member management	○	×	×

Basically, the admin has all permissions. If it is difficult for the admin to review all message exchanges, they can promote some guests to moderators, who can then manage channels and handle inappropriate messages, acting as assistants to the admin.

Work Done for This Project

Here is a summary of the work carried out. Our company can implement these tasks in roughly 2 to 2.5 months.

API: A program that updates data in databases or file servers based on input from the browser.

1. Environment Setup

Authentication service configuration

Database configuration

Creating test pages

Deploying the application

Access via a temporary URL

2. Site Creation

Creating the site-creation interface

Site creation API

Creating the site-editing interface

Site editing API

Site deletion API

Creating the image upload interface

Image upload API

Creating navigation

3. Invitation Code Generation

Creating the invitation-code retrieval interface

Invitation code generation API

Invitation code retrieval API

4. Member Management and Permission Management

Creating the member-management interface

API to remove members

API to change member permissions

Show/hide edit and delete buttons according to permissions

5. Channel Creation

Creating the channel-creation interface

Channel creation API

Creating the channel-editing interface

Channel editing API

Channel deletion API

6. Message Input

Configuring the WebSocket server for real-time communication

Creating the message-creation interface

Message creation API

Configuring the file server for storing PDFs and images

File upload feature

Message delivery configuration

Message editing API

Message deletion API

7. One-on-One Messaging (Direct Messages)

Creating the direct-message interface

8. Video Calls

Configuring the server for video calls

Creating the video-call interface

Video call API

Future Extensions of This Demo Environment

The features introduced so far have been limited to the minimum necessary to provide a chat app. By adding features like those below, we believe usability can be further improved and the user base can be expanded.

Of course, not all of these are strictly necessary. When you ask us to build an app, we will discuss which features are needed or not, and whether to include them in the initial release, so that we can support you in introducing the system efficiently and quickly.

Invitation Email Feature

Regarding the invitation feature introduced at the beginning of this article, currently it only issues an invitation link. From a usability standpoint, it would be better if the app could also send the email itself.

Private Channels

User management is currently done per site, but not per channel, so in that sense, private channels are a necessary feature. However, managing users per channel may make the admin’s work more complex, and it may require appointing a manager for each channel. Therefore, careful consideration is needed to determine whether introducing this feature will definitely improve usability.

Threaded Conversations

When many people participate in a channel, threaded conversations become important. By allowing replies to be attached under a specific message, it becomes easier to understand which topic is being discussed, reducing the burden on readers.

Profile Management

If this app is used as an open communication space, it is helpful to manage information you want to know before starting a conversation as profile information. For example, depending on where someone lives, there may be time differences; by including such information, you can estimate when to expect a reply. You can also roughly understand what times are convenient for switching to a video call.

Integration with Other Services

Integration with other tools is essential when using communication tools. For example, by integrating with a task management tool and sending notifications when task statuses are updated, you can keep track of progress.

For engineers like myself, sending system failures or alerts to Slack allows us to notice issues quickly, and by starting a thread from there, we can keep channel participants informed about the progress of incident response.

Two-Factor Authentication

Two-factor authentication is a commonly used security measure. For example, by registering a mobile phone number and issuing a one-time password via SMS, you can strengthen identity verification.

In Closing

I will be launching a blog article soon that introduces the implementation details.