DEV Community: Yoan Sredkov

Vue Chat - Frontend

Yoan Sredkov — Tue, 02 Mar 2021 09:56:28 +0000

Hello fellow DEVs,

In my previous post, we implemented 80% of our chat backend.
This is the link to the post, in case you missed:
https://dev.to/joan41868/java-chat-app-backend-53k3

Today, we'll continue with implementing basic frontend, as well as enhancing our backend to remember our users. Let's GO!

Prerequisite - Node.js 10+ installed, with NPM/yarn

Install vue-cli with:

 npm i -g @vue/cli # you may need sudo under linux

yarn global add @vue/cli

Then, go on and create a new vue project with:

vue create {project_name}

You will be prompted to select dependencies manually/automatically. It's up to you which dependencies you choose to have. I've chosen:

Babel
Vue Router
Vuex

You should see this as project structure:

Open VSCode in the project folder, and type in the terminal:

npm run serve

This will start your frontend application on port 8080. (Please note that Spring's default port is 8080 too, so your vue app may start at port 8081).

Lets add our dependencies:

npm i axios bootstrap bootstrap-vue 
npm i sockjs-client webstomp-client

We need to define several components - our router and our chat page. We will start with the chat page, as it's more complex in nature.
Before anything else, this is the main.js file. Nothing complex, just vue+bootstrap setup.


import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

We will start off by defining the methods in the chat page, as follows:


methods: {
            goBack(){
                this.$router.push({name: 'Home'});
            },

            addMessage(message) {

                if (this.messages.length > 5) {
                    this.messages.shift();
                }
                this.messages.push(message);
                this.scrollOnNewMessage();
            },

            async sendInitialConnectionRequest() {
                const ax = axios.default;
                const ipifyUrl = 'https://api.ipify.org?format=json';
                const ipData = (await ax.get(ipifyUrl)).data;
                const {
                    ip
                } = ipData;
                const checkUrl = this.beUrl + '/check/' + ip;
                // data should contain IP
                const rsp = await ax.get(checkUrl);

                const {
                    data
                } = rsp;

                if (data.ipAddressHash && data.username) {
                    this.username = data.username;
                } else {
                    this.username = prompt("Enter a username");
                    if (this.username) {
                        const registerUrl = this.beUrl + "/create";
                        const requestData = {
                            ipAddress: ip,
                            username: this.username
                        };
                        await ax.post(registerUrl, requestData);
                    } else {
                        await this.sendInitialConnectionRequest();
                    }
                }

            },

            subscribeToChat() {
                if (this.username && this.username !== '') {
                    this.stompClient.subscribe("/topic/messages/" + this.username, (data) => {
                        const {
                            senderUsername,
                            recipientUsername,
                            content
                        } = JSON.parse(data.body);

                        const message = {
                            senderUsername,
                            recipientUsername,
                            content,
                        };

                        this.addMessage(message);
                    });
                }
            },
            connectToChatServer() {
                this.connectedToServer = false;
                this.socket = new SockJs(this.beUrl + "/chat-app");
                this.stompClient = StompClient.over(this.socket, {
                    debug: false
                });

                this.stompClient.connect({}, (frame) => {
                    this.connectedToServer = true;
                    this.subscribeToChat();
                });
            },

            sendMessage(e) {
                e.preventDefault(); // prevent default form submission
                const message = {
                    senderUsername: this.username,
                    recipientUsername: this.recipientUsername,
                    content: this.messageContent,
                };
                if (message.content.length > 0) {
                    this.stompClient.send("/topic/messages/" + message.recipientUsername, JSON.stringify(message), {});
                    this.addMessage(message); // add message to currently shown messages
                    this.messageContent = "";
                }
            },
            scrollOnNewMessage(){
                const msgContainerHtmlNode = document.getElementById("message-container"); 
                msgContainerHtmlNode.scrollTop = msgContainerHtmlNode.scrollHeight;
            }
        }

And here are the missing variables you probably noticed:


data() {
            return {
                connectedToServer: false,
                messages: [],
                showInfo: Boolean,
                username: String,
                                messageContent: "",
                                recipientUsername: "",
                beUrl: 'http://localhost:8080' //'https://java-chat-backend.herokuapp.com'
            }
        },

This is our chat page markup:


<template>
    <div class="home bg-dark">

        <show-info-button></show-info-button>
        <go-home-button></go-home-button>


        <p style="color: white; font-size: 22px; color: #b491c8;">Your are: {{username}}</p>

        <b-form @submit="sendMessage"
            style="display: flex; flex-direction: column; justify-content: space-between; margin: auto; width: 75%;">
            <b-form-input id="recipient" v-model="recipientUsername" type="text" placeholder="recipient..."
                class="bg-dark" style="margin-top: 5px; margin-bottom: 5px; color: #b491c8;" />

            <div id="message-container" class="chatmessagecontainer" v-show="messages.length > 0">

                <span v-for="message in messages" v-bind:key="message.content + Math.random().toString()">
                    <message :content="message.content" :senderUsername="message.senderUsername"></message>
                </span>

            </div>

            <div class="chat-controller">

                <b-form-input id="messageContent" v-model="messageContent" type="text" placeholder="Your message.."
                    class="bg-dark"  style="margin-top: 5px; margin-bottom: 10px; color: #b491c8;" />

                <span
                    style="display: flex; flex-direction: row; justify-content: space-between; margin-top: 5px; margin: auto;">
                    <b-button type="submit" variant="outline-success" @click="sendMessage">
                        <b-icon icon="chat-fill"></b-icon> Send
                    </b-button>
                    <b-button variant="outline-danger" @click="()=>{messages=[]}">
                        <b-icon icon="trash"></b-icon> Clear
                    </b-button>
                </span>

            </div>


        </b-form>


    </div>
</template>

And the scoped style:


    .chatmessagecontainer {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        max-height: 320px;
        overflow-x: none;
        overflow-y: scroll;
        border: 1px solid black;
        border-radius: 8px;
        margin: auto;
        margin-top: 10px;
        width: 100%;
        padding: 4px 4px 4px 4px;
    }

    .chat-controller {
        margin: auto;
        width: 75%;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 5px;

    }

    button {
        font-size: 15px;
    }

    input {
        font-size: 16px;
        color: #b491c8;
    }

And the router file:


import Vue from 'vue'
import VueRouter from 'vue-router'
import  Chat from '../views/Chat.vue'
Vue.use(VueRouter)

const routes = [
  {
    path: '/chat',
    name: 'Chat',
    component: Chat
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

And finally, the three missing components you definetely noticed:

Message:


<template>
  <div class="chatmessage">
                    <p class="chat-message-username"><b>{{senderUsername}}</b></p>
                    <p class="chat-message-content">{{content}}</p>
  </div>
</template>

<script>
export default {
    props:{
        content: String,
        senderUsername: String,
        createdAt: Date
    }
}
</script>

<style >
.chatmessage{
  background-color: #212121;
  color: white;
  border-radius: 9px;
  max-width: 250px;
  margin: auto;
  font-size: 15px;
  max-height: 60px;
}

.chat-message-content{
  font-size: 14px;
  margin-top: 0;
  padding: 0;

}

.chat-message-username{
  font-size: 15px;
  font-family: monospace;
}

</style>

GoHomeButton


<template>
    <b-icon icon="arrow-left" style="position: absolute; top: 5px; left: 5px; font-size: 33px;" class="h4 text-danger"
            @click="goBack()"></b-icon>
</template>

<script>
export default {
    methods:{
        goBack(){
            this.$router.push("/");
        }
    }
}
</script>

<style>

</style>

ShowInfoButton


<template>
    <div>
        <b-icon icon="question" style="position: absolute; top: 5px; right: 5px; font-size: 33px;"
            class="h4 text-success" v-b-modal.modal-1></b-icon>


        <b-modal id="modal-1" title="Safemessage" body-bg-variant="dark" header-bg-variant="dark"
            footer-bg-variant="dark" body-text-variant="light" header-text-variant="light" :cancel-disabled="true">
            <p>A secure chat aimed at maximum privacy.</p>
            <p>No cookies.</p>
            <p>No trackers.</p>
            <p>No database for messages.</p>
            <router-link to="/donate">Support the author :)</router-link>
        </b-modal>

    </div>

</template>

This is all for this post, as it got pretty long. In the next one, the 3rd part, we will enhance our backend so it can accept the initialConnectionRequest sent from our frontend.

Thank you for dropping by, and have a nice day :)

Java Chat App - Backend

Yoan Sredkov — Mon, 01 Mar 2021 15:34:36 +0000

Hello fellow devs,

In this series of posts, I'll demonstrate the power of Java + Spring Boot + Vue.js. I'll show you how to create a basic chat server and frontend. There will be no "user" entity, but rather a user-less "login". Lets go!

First, go to https://start.spring.io/.
This is the spring initializer, which helps you to generate your app + the respective dependencies in a single .zip file, which you will later download.

Those are the dependencies I've selected:

So, now that we have the project initialized, let's go write some code! :)

We'll start right away, by defining our "message" class.
This is mine:

// ... imports here ...
@Data
public class ChatMessage{
    private String content;

    private String senderUsername;

    private String recipientUsername;

    private Timestamp createdAt;

    // JSON toString method, we will need this later
    @Override
    public String toString() {
        return "{\"ChatMessage\":{"
                + "                        \"content\":\"" + content + "\""
                + ",                         \"senderUsername\":\"" + senderUsername + "\""
                + ",                         \"recipientUsername\":\"" + recipientUsername + "\""
                + ",                         \"createdAt\":" + createdAt
                + "}}";
    }
}

The @data annotation is an "all-together" annotation, which contains @RequiredArgsConstructor, @Getter, @setter, @EqualsAndHashCode, @ToString in one. Isn't that beautiful?

This is our base class, and as you can see, it's 100% simple. Let's go on to the WS (websocket) config, as this is the other core of our app.
I've created the basic class WebSocketConfiguration as follows:

// imports...
@EnableWebSocketMessageBroker
@Configuration
public class WebsocketConfiguration implements WebSocketMessageBrokerConfigurer {


// registers basic endpoints
    @Override
    public void registerStompEndpoints(final StompEndpointRegistry registry) {
        registry.addEndpoint("/chat-app", "/sockjs-node", "/ws", "/secured/room").setAllowedOriginPatterns("*").withSockJS();
// Please note the .setAllowedOriginPatterns, as it enables cross-origin requests
    }

// configures message broker
    @Override
    public void configureMessageBroker(final MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic"); // enables basic message broker over the /topic endpoint
        registry.setApplicationDestinationPrefixes("/chat-app"); // enables /chat-app as a destination
        registry.setUserDestinationPrefix("/secured/user"); // used so i'll be able to send messages to specific users
    }

Yes, It really is that easy. We'll follow up with a Golang chat application in another post, so you can see the difference.

We'll continue by defining our controller. This is my chat controller:

// imports here...


@Component
@Controller
public class ChatController {

    private final SimpMessagingTemplate messagingTemplate;

    // constructor
    public ChatController(final SimpMessagingTemplate messagingTemplate) {
        this.messagingTemplate = messagingTemplate;
        this.messagingTemplate.setMessageConverter(new SimpleMessageConverter()); // converts messages to bytes
    }

    // Receives and emits chat messages to secured user rooms
    @MessageMapping("/message/{room}") // receives from specific "room"
    @SendTo("/topic/messages/{room}") // sends to specific queue or "room"
    public ChatMessage sendChatMessage(final ChatMessage message) {
        messagingTemplate.convertAndSend("/topic/messages/" + message.getRecipientUsername(), message.toString().getBytes());
        return message;
    }

}

As you can see, the code is quite straightforward and simple.
The endpoint receives a ChatMessage object from a frontend app, and emits it back to a specific user. This is possible because of our /secured/user endpoint in our config. ( It's also good to note that the frontend app is subscribed to a single topic/endpoint - /topic/messages + {username}.

We'll also add a CORS filter, as follows:

// imports here...

@Component
public class CorsFilter implements Filter {
    @Override
    public void doFilter(final ServletRequest servletRequest,
                         final ServletResponse servletResponse,
                         final FilterChain filterChain) throws IOException, ServletException {
        final HttpServletRequest req = (HttpServletRequest) servletRequest;
        final HttpServletResponse res = (HttpServletResponse) servletResponse;
        final String origin = req.getHeader("Origin");

        res.addHeader("Access-Control-Allow-Origin", origin);
        res.addHeader("Access-Control-Allow-Credentials", "true");
        res.addHeader("Access-Control-Allow-Headers", "*");
        res.addHeader("Access-Control-Allow-Methods", "*");

        filterChain.doFilter(req, res);
    }
}

This filter will eliminate all the CORS-related issues we would have had if we started trying to connect to the server right away.

We'll continue with the frontend application in the next post. We will create a basic chat client, and enhance our backend so it will remember the IP addresses of the connected users, so they won't have to enter a new username every time.

We'll build this:

Have a nice day, and enjoy programming!
See you again :)

Scaling a simple Node.js + Express.js application using node.js modules

Yoan Sredkov — Wed, 15 Apr 2020 10:19:39 +0000

Hello DEVs,

This tutorial is going to be about scaling a Node.js + Express.js application.

We will use the very basic express configuration of one-file server logic, and we will scale the application by cloning it, using the native node.js modules 'cluster' and 'process', aswell as we will create a little CLI, so we can interact with our workers(processes/cloned apps).

I hope you are ready, beacause we're just getting started!

So, let's create a new directory, call it testNodeApp or something like that.
We will run

npm init

and then

npm install express

This is the basic app.js file:

const express = require('express');
const app = express();


app.get('/', (request, response, nextHandler) => {
  response.send('Hello node!');
  console.log(`Served by worker with process id (PID) ${process.pid}.`);
});

const server = require('http').createServer(app);

server.on('listening', () => {
  console.log("App listening on port 3000");
})
server.listen(3000);

You can run it with

node ./app.js

, and if you do, you should get an output like:

App listening or port 3000

And when you navigate to http://localhost:3000, or just do

curl localhost:3000/

you should see "Hello node!" as a response. Check you console for the important output - something like:

Served by worker with process id (PID) XXXX.

Where xxxx is the process id.

The next thing we are going to do is to create a cluster.js file in the same directory.

cluster.js - INITIAL


const cluster = require('cluster');
const os = require('os');

if (cluster.isMaster) {
    // Take advantage of multiple CPUs
    const cpus = os.cpus().length;

    console.log(`Taking advantage of ${cpus} CPUs`)
    for (let i = 0; i < cpus; i++) {
        cluster.fork();
    }
    // set console's directory so we can see output from workers
    console.dir(cluster.workers, {depth: 0});

    // initialize our CLI 
    process.stdin.on('data', (data) => {
        initControlCommands(data);
    })

    cluster.on('exit', (worker, code) => {
        // Good exit code is 0 :))
        // exitedAfterDisconnect ensures that it is not killed by master cluster or manually
        // if we kill it via .kill or .disconnect it will be set to true
        // \x1b[XXm represents a color, and [0m represent the end of this 
        //color in the console ( 0m sets it to white again )
        if (code !== 0 && !worker.exitedAfterDisconnect) {
            console.log(`\x1b[34mWorker ${worker.process.pid} crashed.\nStarting a new worker...\n\x1b[0m`);
            const nw = cluster.fork();
            console.log(`\x1b[32mWorker ${nw.process.pid} will replace him \x1b[0m`);
        }
    });

    console.log(`Master PID: ${process.pid}`)
} else {
    // how funny, this is all needed for workers to start
     require('./app.js');
}

So, what we do here is just import the os and the cluster modules, get the number of cpus and start workers with amount equal to the cpus count - we want the maximum.

The next thing, we set up a if-else condition - workers live in the ELSE block, as require('./file') will execute the file if used like this.

In the IF block, we will write down our logic for the master worker.

cluster.fork() starts the child process in the ELSE

To initialize our CLI, we need to listen for user input. This input is the standart input of the process, or stdin. We can access it via:

process.stdin.on("event", handlerFunc);

Because we are in the master worker.

Something very important to note is that the master worker is not a worker, but a controller - he will not serve requests, but give requests to workers.Requests should be randomly distributed across workers.You can check this by making a benchmark test - if you are under a Linux system, you probably have apache benchmark (ab). Open your terminal and write:

ab -c200 -t10 http://localhost:3000/

This will execute 200 concurrent requests for 10 seconds.
Try it with both 1 worker, and many workers - you will see the difference.

Next, here:

cluster.on('exit', (worker, code) => {
        // Good exit code is 0 :))
        // exitedAfterDisconnect ensures that it is not killed by master cluster or manually
        // if we kill it via .kill or .disconnect it will be set to true
        // \x1b[XXm represents a color, and [0m represent the end of this 
        //color in the console ( 0m sets it to white again )
        if (code !== 0 && !worker.exitedAfterDisconnect) {
            console.log(`\x1b[34mWorker ${worker.process.pid} crashed.\nStarting a new worker...\n\x1b[0m`);
            const nw = cluster.fork();
            console.log(`\x1b[32mWorker ${nw.process.pid} will replace him \x1b[0m`);
        }
    });

We will restart our workers if any worker crashes. You can experiment with this and add those lines in app.js (at the end) :

setTimeout(()=>{
   process.exit(1);
}, Math.random()*10000);

This will kill a process at random time interval.

when you execute

node cluster.js

, you should start recieving input like:

Taking advantage of 8 CPUs
{
  '1': [Worker],
  '2': [Worker],
  '3': [Worker],
  '4': [Worker],
  '5': [Worker],
  '6': [Worker],
  '7': [Worker],
  '8': [Worker]
}
Master PID: 17780
App listening on port 3000
App listening on port 3000
App listening on port 3000
App listening on port 3000
App listening on port 3000
App listening on port 3000
App listening on port 3000
App listening on port 3000
Worker 17788 crashed.
Starting a new worker...
Worker 17846 will replace him
App listening on port 3000
Worker 17794 crashed.
Starting a new worker...

Worker 17856 will replace him 
Worker 17804 crashed.
Starting a new worker...

Worker 17864 will replace him
App listening on port 3000
App listening on port 3000

Note that everything here is async, so you wont get a really ordered output. I stronly advise you to delete the

setTimeout(...)

in app.js from now on.

Now, we are going to continue with the very CLI itself.You should have noticed that we are actually calling an undefined function then we listen to stdin, so we will now create this function.

const initControlCommands = (dataAsBuffer) => {
    let wcounter = 0; // initialize workers counter
    const data = dataAsBuffer.toString().trim(); // cleanse input
    // list workers command
    if (data === 'lsw') { 
        Object.values(cluster.workers).forEach(worker => {
            wcounter++;
            console.log(`\x1b[32mALIVE: Worker with  PID: ${worker.process.pid}\x1b[0m`)
        })
        console.log(`\x1b[32mTotal of ${wcounter} living workers.\x1b[0m`)
    }
    // -help command
    if (data === "-help") {
        console.log('lsw -> list workers\nkill :pid -> kill worker\nrestart :pid -> restart worker\ncw ->create worker')
    }
    /// create worker command
    if (data === "cw") {
        const newWorker = cluster.fork();
        console.log(`Created new worker with PID ${newWorker.process.pid}`)
        return;
    }
    // here are the commands that have an argument - kill and restart
    const commandArray = data.split(' ');
    // assign the actual command on variable
    let command = commandArray[0];
    if (command === "kill") {
        // find the corresponding worker
        const filteredArr = Object.values(cluster.workers).filter((worker) => worker.process.pid === parseInt(commandArray[1]));
       // check if found
        if (filteredArr.length === 1) {
        // kill it
            filteredArr[0].kill("SIGTERM"); // emit a signal so the master //knows we killed it manually, so he will not restart it
            console.log(`\x1b[31mKilled worker ${filteredArr[0].process.pid} .\x1b[0m`);
        } else {
       // Display a friendly error message on bad PID entered
            console.log(`\x1b[31mWorker with PID ${commandArray[1]} does not found. Are you sure this is the PID?\x1b[0m`)
        }
    }
    // this command is quite like the kill, i think the explanation would 
    // be quite the same
    if (command === "restart") {
        const filteredArr = Object.values(cluster.workers).filter((worker) => worker.process.pid === parseInt(commandArray[1]));
        if (filteredArr.length === 1) {
            console.log(`\x1b[31mWorker ${filteredArr[0].process.pid} restarting\x1b[0m`)
            filteredArr[0].disconnect(); // this should be used to kill a process manually
            const nw = cluster.fork()
            console.log(`\x1b[32mWorker is up with new PID ${nw.process.pid}.\x1b[0m`)

        } else {
            console.log(`\x1b[31mWorker with PID ${commandArray[1]} does not found. Are you sure this is the PID?\x1b[0m`)
        }
    }
}

You can now use the CLI to view your workers (lsw), create workers (cw) and kill workers.
Remember, you can always use the -help command!

I hope you found this tutorial helpful and inspiring, as Node.js is great tech, and it is quite begginer friendly.Play around with the cli, explore the edge-cases and have fun!

Until next time,
Yoan