DEV Community: Askarbek Zadauly

Building Tetris using WebSocket and Svelte Stores

Askarbek Zadauly — Wed, 09 Oct 2024 12:56:58 +0000

In this article I wanted to share my experience of building a Web Application that uses WebSocket connection instead of HTTP request/response. As a sample Web Application we'll be building Tetris game, because... why not?

You can checkout the full source code right away on GitHub

Key Features

Full Duplex. Both the client and the server can send messages at the same time. So when we send a request from frontend to backend we will not wait for a response. Instead we will subscribe to an event (Subject) that will be triggered by backend request (which can be considered as a response).
Synchronized Svelte Stores. When backend sends a request to frontend, all we have to do is to update a corresponding Svelte Store. Which in turn will trigger a UI update.

Tech Stack

Backend: NodeJS with Typescript
Socket Server: uWebSockets
Validations: Zod
Frontend: SvelteKit project used as a SSG
Styling: TailwindCSS
package manager: pnpm

Starting the uWebSockets (backend) server

Here's how I start our WebSocket server:

import { App, WebSocket } from 'uWebSockets.js';

const SocketServer = App({});

const startServer = () => {
  console.log('starting backend server...');

  SocketServer.ws<{ socket_id: string }>('/tetris', {
    open: () => {
      console.log('opening connection');
    },
    close: () => {
      console.log('closing connection');
    },
    message: (ws: WebSocket<{ socket_id: string }>, message: ArrayBuffer, isBinary: boolean) => {
      console.log('message received')
    },
  }).listen(8080, () => {
    console.log('backend server is running on: ', 8080);
  });
};

startServer();

uWebSockets socket server

uWebSockets is web server written in C++. In our case we'll be using uWebSockets.js which has bindings to NodeJS. It can be used as a usual web server but the main feature is its WebSocket server. It is 10x faster than Socket.IO and 8.5x faster than Fastify. I have to say I haven't benchmarked it myself. I decided to use uWebSockets just because it feels more pure to my taste. For example it doesn't require Express it runs on it's own, also it doesn't have any additional wrappers or helper functions that "babysit" you. You just get a message and you handle it whatever the way you want it. So if you're ok with that approach and you need a faster WebSocket server then you should use uWebSockets.

Messages

Frontend and Backend will be sending each other a data which we'll be calling "messages". A Message is a JSON object like this:

export type TMessage = {
  type: MessageType;
  body: any;
};

export enum MessageType {
  MOVE_LEFT,
  MOVE_RIGHT,
}

Depending on a Message Type our backend will be executing a corresponding handler with parameters supplied in "body" field. The function that executes handler depending on a Message Type we'll call the "MessageBroker" and it can look like this:

import { MessageType } from './message.js';

export const messageBroker = (type: MessageType, body: any) => {
  switch (type) {
    case MessageType.MOVE_LEFT:
      {
        moveLeftHandler(body);
      }
      break;
    case MessageType.MOVE_RIGHT:
      {
        moveRightHandler(body);
      }
      break;
  }
};

export const moveLeftHandler = (params: any) => {
  console.log('moving left');
};

export const moveRightHandler = (params: any) => {
  console.log('moving right');
};

Now we would like to send a request from backend to frontend. In our case we need to send the blocks of the tetris game. If user clicks left or right button we will redraw all blocks by sending an array, like this:

export const blocks: number[][] =[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1],
[0, 0, 1, 0, 1, 1, 0, 1, 1, 1, 1],
[1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1],
]

This array will be "synchronized" with a Svelte Store which has same type and will be used in UI to show this:

here's the UI source:

export const Rows = writable<number[][]>([]);

<div class="flex flex-col items-center border-l border-r border-b border-neutral-500">
  {#each $Rows as row, indexRow}
    <div class="flex items-center border-b border-neutral-200 last:border-b-0">
      {#each row as column, indexColumn}
        <Cell value="{column}" />
      {/each}
    </div>
  {/each}
</div>

In order to understand how all "other stuff" work you're welcome to checkout the full source code.

Here are some main features of the GitHub repo you need to keep in mind.

Monorepo

The project is a monorepo, containing both backend and frontend in "modules" folder.

packages:
  - 'modules/*'

There are some advantages and disadvantages to using monorepo, the reason I used monorepo is that I share Typescript types and Zod shapes (more on this later) across both projects. So I declare all types in backend project and import them in frontend project, that way I have one source for all types.

Validating data using Zod

Zod is a TypeScript-first schema validation with static type inference.
So let's say for example we have this basic type for a User:

type TUser = {
  email: string;
  password: string;
}

Now we want to know if the provided email field is a valid email and password field is at least 6 character length. Instead of writing a check function we can use a special library that does it for us. So I've chosen Zod to do that. Here's how:

const userShape = z.object({
  email: z.string().email(),
  password: z.string().min(6),
});

const data = {
  email: 'some@example.com',
  password: '123456',
};

const user = userShape.parse(data);

Now if the data is incorrect the userShape.parse function will throw an exception.
But the best feature of Zod is that it can infer types:

type TUser = z.infer<typeof userShape>

Now TUser is a proper Typescript type.
I'm using Zod validation and infered types for all data that goes between frontend and backend.

Final thoughts

Some of my decisions on building this WebApp might not be the best, I'm aware of that, so consider this article more like a conversation starter rather than a How-To guide.

Cheers!

Validate SvelteKit endpoints with Joi

Askarbek Zadauly — Sun, 02 Oct 2022 12:24:04 +0000

Intro

In this post we are going to build a very simple fullstack app using SvelteKit and add an endpoint parameter validation to it. A lot of projects usually host their backend on a separate project serving from a subdomain. But SvelteKit can be used as a fullstack framework and it's easier to maintain one project rather than two.

Validation

It doesn't matter if you choose separate backend or all-in-one SvelteKit, you should have a backend validation for api endpoints as a safety measure in case if someone wants to send requests directly in order to break something. A straightforward way to do this would be just checking every parameter like this:

if(!username || username.length < 3 || username.length > 30) {
  // return error
}

But instead I am gonna use Joi for validations.

Joi validator used to be part of hapi but then became a standalone library that you can use everywhere where validation is needed. So for example, here's how username validation can be done:

username: Joi.string().alphanum().min(3).max(30).required()

Use case

Let's build an App that has a form that user fills out and sends to our endpoint. If some of the parameters are invalid the endpoint will return an error message. If everything's fine then it will send it further to a server function to process.

Let's start

First we create a scaffold project by running:

npm create svelte@latest sveltekit-joi-example

Add tailwindcss for easier styling
Then create our Page at

/src/routes/+page.svelte

<script lang="ts">
  let formValues = {
    username: '',
    email: '',
    password: '',
    confirmPassword: '',
  };

  const onContinueClick = () => {
    console.log('sending data: ', formValues);
  }
</script>

<label>Username:</label>
<input bind:value="{formValues.username}" type="text" />

<label>Email:</label>
<input bind:value="{formValues.email}" type="text" />

<label>Password:</label>
<input bind:value="{formValues.password}" type="password" />      

<label>Confirm password:</label>
<input bind:value="{formValues.confirmPassword}" type="password" />

<button on:click="{onContinueClick}">
  Continue
</button>

After adding some tailwind magic I got form looking like this:

I will post a link to GitHub repo with full project.

Endpoints

Now it's time for a non-frontend stuff. SvelteKit has different ways to recognize backend code:

naming files as +server.ts (or .js)
putting files under /src/lib/server folder

Putting +server.ts files under /src/routes folder means you can call them using HTTP requests.
For example, let's say we have a file:
/src/routes/api/user/sign-in/+server.ts
That would mean we can call an HTTP request on this URL:
/api/user/sign-in
to execute code inside +server.ts

Which of HTTP request methods (GET, POST, PUT) can be called depends on exported function name:

export const GET: RequestHandler = async ({ request }) => {
  // GET endpoint
}


export const POST: RequestHandler = async ({ request }) => {
  // POST endpoint
}

All files under /src/lib/server folder are server-only code. It's a good place for all DB interactions or external API calls.

So let's add our Joi validation into the endpoint:
/src/routes/api/entry/+server.ts

import type { RequestHandler } from '@sveltejs/kit';
import { json } from '@sveltejs/kit';
import Joi from 'joi';
import { SaveEntry } from '$lib/server/Entry';

const schema = Joi.object({
  username: Joi.string().alphanum().min(3).max(30).required(),
  password: Joi.string().pattern(new RegExp('^[a-zA-Z0-9]{3,30}$')),
  confirmPassword: Joi.ref('password'),
  email: Joi.string().email({ minDomainSegments: 2, tlds: { allow: ['com', 'net'] } }),
});

export const POST: RequestHandler = async ({ request }) => {
  const params = await request.json();
  const { error } = schema.validate(params);

  if (error) {
    let msg = '';
    if (error.details.length && error.details[0].message) {
      msg = error.details[0].message;
    } else {
      msg = 'unknown validation error';
    }
    return new Response(`Validation: ${msg}`, { status: 400 });
  }

  const { username, email, password, confirmPassword } = params;
  await SaveEntry(username, email, password, confirmPassword);

  return json({ success: true });
};

SaveEntry function is supposed to save to Database, but it's not in our scope right now so it's just an empty function.

Server Hooks

Validating params inside an endpoint is a straightforward approach. A better way would be to handle validations elsewhere so the endpoint code don't have to worry about it. Luckily SvelteKit has server hooks that can help with that. The hooks source file is located here:

/src/hooks.server.ts

The hooks are app-wide functions that SvelteKit calls in response to specific events. We are particularly interested in the handle hook that gets called before endpoint functions on every HTTP request. The handle hook is basically a function but it can also be a chain of functions that will be called in sequence. A typical scenario for a hook sequence can be, for example:

log
authenticate
validate

Works very similar to Express's middleware. Only on SvelteKit it's called sequence. Here's how our hook sequence can look like:

import { sequence } from '@sveltejs/kit/hooks';
import log from './sequences/log';
import auth from './sequences/auth';
import validation from './sequences/validation';

export const handle = sequence(log, auth, validation);

Now each request will be:

Logged
Checked for authorization token
Validated if needed

Logging and Authorizing is out of our scope so those functions are empty for now. Now let's focus on the validation code.
We should be able to validate more than one endpoint. In order to do so we should have a Map (json object) where a key is an endpoint's path and a value is a Joi schema, like this:

import entrySchema from './routes/api/entry/validation';

const map: { [keys: string]: any } = {
  '/api/entry': entrySchema
};

where ./routes/api/entry/validation is:

import Joi from 'joi';

export default {
  POST: Joi.object({
    username: Joi.string().alphanum().min(3).max(30).required(),
    password: Joi.string().pattern(new RegExp('^[a-zA-Z0-9]{3,30}$')),
    confirmPassword: Joi.ref('password'),
    email: Joi.string().email({ minDomainSegments: 2, tlds: { allow: ['com', 'net'] } }),
  }),
};

As you can see I've added POST key which would allow us to have different validations for POST PUT DELETE requests.
Now let's move validation code into our hook. The logic is:

get current path and method
check if map object has a key with current path
check if map object has validation for current method
run the validation
if validation has an error then return 400 error
if validation has no error then handover to an endpoint

import type { Handle } from '@sveltejs/kit';
import entrySchema from '../routes/api/entry/validation';

const map: { [keys: string]: any } = {
  '/api/entry': entrySchema,
};

const validation: Handle = async ({ event, resolve }) => {
  for (const url of Object.keys(map)) {
    if (event.url.pathname.indexOf(url) > -1) {
      const method = event.request.method;
      // we need to clone, otherwise SvelteKit will respond with 'disturbed' error
      const req = event.request.clone();

      const params = await req.json();

      if (map[url][method]) {
        const { error } = map[url][method].validate(params);
        if (error) {
          let msg = '';
          if (error.details.length && error.details[0].message) {
            msg = error.details[0].message;
          } else {
            msg = 'unknown validation error';
          }

          return new Response(`Validation: ${msg}`, { status: 400 });
        }
      }
    }
  }

  return resolve(event);
};

export default validation;

NOTE: As you can see I'm calling event.request.clone() to clone the request stream. This is a controversial approach. But if we don't call it then the endpoint function won't be able to get the params and SvelteKit will throw disturbed error, whatever that means. Another approach would be to move params into event.locals.

Now we can remove validation from our endpoint, so the code is much cleaner now:

import type { RequestHandler } from '@sveltejs/kit';
import { json } from '@sveltejs/kit';
import { SaveEntry } from '$lib/server/Entry';

export const POST: RequestHandler = async ({ request }) => {
  const params = await request.json();

  const { username, email, password, confirmPassword } = params;
  await SaveEntry(username, email, password, confirmPassword);

  return json({ success: true });
};

In an endpoint function we are sure that all params are validated otherwise it wouldn't be called.

Form Actions

SvelteKit recommends to use form actions to handle requests and validations. While it's a valid approach but it doesn't cover all cases. You can checkout the project here:

https://github.com/Ascarbek/sveltekit-joi-example

Feel free to leave any comments.

Cheers!

Quick Look feature for a Web App

Askarbek Zadauly — Fri, 16 Sep 2022 12:03:29 +0000

Introduction

Hi Dev.to community. My name is Askarbek. I'm a frontend developer. I wanted to share my process of building one component I developed recently as a small side project and see if I can get some ideas.

Short description

One of my favorite features of MacOS is the Quick Look. and I'm sure it could be very useful for a Business Application.

What is Quick Look and why it's so good?

It's when you're browsing a folder and press Spacebar it shows the content of the current file. It can be a picture, video or a text file. The good thing is that you can select next or previous file by pressing arrow buttons without closing the Quick Look. And when you eventually close Quick Look by pressing Spacebar again the selected file would be the last viewed file.

Business Application

By Business Application I mean applications like CRM, ERP etc. Those Apps can be very complex and they do solve complex problems but, it all comes down to two tools: Table and Form views. A Table view lists some entities and a Form view shows details of a single entity. The Form view also allows a user to edit the current entity.

Use Case

When you open a Table view, you can select a line then press Spacebar that would open a Form view and then keep navigating through the table lines by pressing up/down arrows without closing the Form view.
As an additional features a user should be also able to:

Edit the data
Save or discard changes
Change the status (if applicable)

So let's build a very simple Business App that implements the use case.

Project stack

I'm going to use Svelte, Tailwind and Vite as my frontend stack. I'm not gonna need a backend for this project since I am not building a "full-blown app", it's just a POC so I'll just use a json file as a datasource.

Hotkeys

Table and Form view components will be made mostly with html and css, nothing complex. The main feature we'll be focusing on is the hotkeys. Here is the list of initial hotkeys we'll implement:

Spacebar: Open/Close View form (read mode by default)
Enter: Switch to edit mode of the View form
Ctrl + Enter: Save changes and switch back to read mode of the View form
Esc: Discard changes and switch back to read mode
N: Open an empty View form to create a new item
S: Change the status of the current item

So I should explain the idea of read/edit mode. When we open a View form it should display all the details of the currently selected table line (entity) as a preview (readonly). That way we can guarantee that all other hotkeys like: up/down arrows and Spacebar will keep working and made sense. If a View form would have some <input> then a user by typing a space in it could close the Form since Spacebar is a hotkey for open/close. Of course we could override the hotkey while input is focused but IMO it would overcomplicate the UX. Two modes of a Form (read/write) will strictly divide the UX, since in edit mode the hotkeys mentioned will stop working until we switch back to read mode by saving or discarding changes.

Code

We'll create a separate component called HotkeyDispatcher that will handle the hotkey logic and fire appropriate events to it's parent component. The HotkeyDispatcher will not have any layout.

To handle hotkeys we need a global dispatcher to add event listeners to, so we'll use svelte:window element for that.

<svelte:window on:keydown={onKeyDown} on:keyup={onKeyUp} />

I'll create a boolean variable for each hotkey and will set it to true or false depending on which key is pressed right now. We should also prevent default behavior of the browser so it won't interfere with our logic. Also browser's default behavior is the reason why I'm using keydown instead of keypress.

const onKeyDown = (e: KeyboardEvent) => {
  if (isOpen) {
    if (isEditMode) {
      onCtrlEnter = e.code === 'Enter' && e.ctrlKey && !e.shiftKey;
      onEscape = e.code === 'Escape';
    } else {
      if (e.code === 'Space' || e.code === 'Enter' || e.code === 'ArrowDown' || e.code === 'ArrowUp')
        e.preventDefault();
      onArrowDown = e.code === 'ArrowDown';
      onArrowUp = e.code === 'ArrowUp';
      onSpace = e.code === 'Space';
      onEscape = e.code === 'Escape';
};

const onKeyUp = (e: KeyboardEvent) => {
  onArrowDown = false;
  onArrowUp = false;
  onSpace = false;
  onEscape = false;
  onEnter = false;
  onCtrlEnter = false;
};

Depending on which key is pressed we dispatch a corresponding event to a parent component.

const SpaceHandler = () => {
  isOpen = !isOpen;
  if (isOpen) {
    dispatch('Open');
  } else {
    dispatch('Close');
  }
};

$: onSpace && SpaceHandler();

const EscapeHandler = () => {
  if (isEditMode) {
    isEditMode = false;
    dispatch('Discard');
    dispatch('ViewMode');
  } else {
    isOpen = false;
    dispatch('Close');
  }
};

$: onEscape && EscapeHandler();

Now we can drop in our HotkeyDispatcher into a Page that has all the html and css we need. In our case the Page has two components DataTable and FormView. We open or close FormView and switch its modes as a response to HotkeyDispatcher's events.

<script lang="ts">
  const OnNextRow = () => {
    if (selectedRow < rows.length - 1) selectedRow++;
  };

  const OnPrevRow = () => {
    if (selectedRow > 0) selectedRow--;
  };

  const OnOpen = () => {
    showForm = true;
  };

  const OnClose = () => {
    showForm = false;
  };

  const OnEditMode = () => {
    editMode = true;
  };

  const OnViewMode = () => {
    editMode = false;
  };
</script>

<HotkeyDispatcher 
  on:NextRow="{OnNextRow}" 
  on:PrevRow="{OnPrevRow}" 
  on:Open="{OnOpen}" 
  on:Close="{OnClose}" 
  on:EditMode="{OnEditMode}"
  on:ViewMode="{OnViewMode}"
  on:Save="{OnSave}"
  on:Discard="{OnDiscard}"
/>

<DataTable bind:selectedRow columns="{columns}" rows="{rows}" fields="{fields}" />

{#if showForm}
  <FormView
    editMode="{editMode}"
    data="{rows[selectedRow]}"
    bind:modifiedData
    fields="{fields}"
    fieldOrder="{fieldOrder}"
    hotkeyTrigger="{trigger}"
  />
{/if}

Result

I didn't include the whole code here otherwise the post would get too big. You can checkout the full source on GitHub any suggestions are welcome!