In part 1 we developed a front-end part of our little chat app. In this part, we will write the backend. Full source code: https://github.com/zaicevas/chat-demo

Let’s start by finishing the frontend, so that it’s ready to receive messages from the backend. We will do it in two phases:

• Writing a WebSocket wrapper
• Using the wrapper in our App component

Writing a WebSocket wrapper

The reason we’re doing it, is to have the logic, concerned with how to send and receive messages to a server, be outside of the UI component.

Create a WebSocketClient.js:

Note, that in 30th line, you need to pass your local IP. Sadly, localhost won’t work, because of iOS restrictions.

Using the wrapper in our App component

Let’s update our App.js so that it uses our WebSocketClient to retrieve and send messages:

The tricky part here is the second useEffect. This useEffect runs every time messages change. It’s not enough call that useEffect once, because in that case, messages would not refer to the latest state. That problem could also be solved with other techniques (for instance, useRef) but this solution seems simpler and sufficient.

After these changes, we are ready to send and receive new messages from our backend server.

Building the backend

Let’s go straight to spring initialzr and choose following options:

When the project is generated, hop into your favourite IDE and let’s add a couple of dependencies into our pom.xml. At the end, it should look like this:

Let’s then create a class which will handle WebSocket messages

We need another class, which maps our WebSocket API path and the handler.

Congratulations for making it that far, because we have only one thing left — implement our WebSocketHandler:

In a nutshell, we’re taking every message that we receive and send it to all of the clients. Simple, isn’t it?

Now you should be able to connect to the app with two or more phones and chat!

This app, of course, has gazillion number of problems, some of which are:

1. What about users with the same name?
2. No persistence
3. No auth

However, I am going to let you solve them on your own! Thank you for following these tutorials. You can find the source code here: https://github.com/zaicevas/chat-demo

Let’s build a chat app from scratch with React Native, Java and WebSockets!

Part 2: https://medium.com/@tozaicevas/chat-app-from-scratch-with-react-native-and-java-part-2-backend-deef6fb38bad. Source code: https://github.com/zaicevas/chat-demo

Ladies and gentlemen, I recently spent some time working with WebSockets by writing a simple chat app and was amazed by how easy it is, so let me enlighten you as well!

We’ll use

• Expo
• Spring Boot
• WebSockets
• React Native Gifted Chat

P.S. Newest versions as of 2020–01

Mobile UI in part 1 and Java backend in part 2 of this tutorial.

The only things that we need for this tutorial are expo and a phone (you can use android/iOS emulators if you want)

Setting up expo

• Runnpm install expo-cli --global This will install the expo so that we can run all the features expo provides us (creating an initial project, running it on our phone)

Note: if you don’t have npmyou can get it by executing pacman -S npm nodejsor apt-get install npm nodejson Linux machines and https://nodejs.org/en/download/ for Windows.

• Run expo initand choose blank (managed workflow). This will create an empty project.
• Move to the directory of the created project and run expo start
• You should see a new tab opened in your browser, if you don’t — open http://localhost:19002/
• Download expo mobile app for Android/iOS
• Scan the QR code

Getting name from the user

First of all, we need to get a name from the user. Open App.js and let’s start with this code snippet, which I will explain soon:

We should now see this layout:

With this code, we are able to read the name from the user, but we are not doing anything with it just yet. As soon as user presses Enter, the screen becomes empty. That’s okay, it’s expected behavior for now.

As you can see, we made a couple of changes in the code:

1. Added TextInput, Button
2. Added name, isEnter React hooks
3. Added conditional rendering based on whether user has pressed Enter
4. Changed function App() to a lambda

For those unfamiliar with React or React hooks — shortly speaking, we create 2 variables name and isEnter which are managed by React. Whenever we change them, React handles the changes in the UI. However, one should only change them by calling respective functions setName and setIsEnter

Therefore, when onChangeText={text => setName(text)}gets called in our TextInput, React figures out that namehas been changed and it rerenders our App component with new value of name. That’s why when we are typing our name, we can see it in our app.

Now, that we have read user’s name, we can start coding the main part of our application — chat.

Coding chat

Firstly, we need the React Native Gifted Chat component. Run npm install react-native-gifted-chat --save

Now, let’s modify our App.js by rendering a chat, instead of an empty screen, when the user has pressed Enter:

At this point, you can chat with yourself:

Let’s look closer into what we’ve changed:

1. Created another hook messages
2. Passed a mock message as a default state for messages hook just to see how it is rendered
3. Used react-native-gifted-chat to render chat component when the user has pressed Enter
4. Whenever we send a message, we updated the chat component.

So far, everything is going well, however our app is still local, which means we cannot see if someone else has sent a message. For this reason, we need to setup a WebSocket client and build a backend server.

Building a backend server will be an objective of the 2nd part of this tutorial, so stay tuned!