DEV Community: NOPR9D ☄️

Socket.io | Show Number of visitor

NOPR9D ☄️ — Thu, 10 Nov 2022 06:00:56 +0000

Hey 👋, I hope you're doing well,

It's been a long time since we've seen each other!

Today I want to talk to you a bit about socket.io

This very nice little library that allows us to easily manage our sockets under nodejs.

Indeed I had to use it in recent days to display a counter of current visitors in real time on my personal site.

It was very simple, so we'll see how it goes!

Let's organize all this a bit with chapters :

Creation
Code
Extra
Repo Github

Creation

So, if you allow me, let's start from the beginning, the creation of the project!

We still have some expectations, in the sense that we are not going to "just" copy/paste code from the documentation.

We are going to make a small server with :

NodeJs (It's obvious)
Express
socket.io
Typescript (My forever friend)
RxJS (Because it's great! And it will allow you to simply develop this project)

Come on, let's finally get started!

This part being quite simple, we will quickly go over the first commands.

We create a new folder for our project and enter on it :

mkdir socketio-numberOfOnlineUser-ts
cd socketio-numberOfOnlineUser-ts

We init our new node project :

npm init -y

(with -y cause we don't wanna loose time with the cli, -y approve all by default)

We add our beautiful dependencies ! :

npm i express rxjs socket.io
npm i -D @types/express @types/socket.io nodemon ts-node tslint typescript

Prepare the live reloading with this as script in your package.json

  "scripts": {
    "dev": "nodemon",
    "start": "ts-node src/index.ts",
  }

create a nodemon.json file bellow your package.json with :

touch nodemon.json

Like this ⬇️

And put this on it (it will use this config for nodemon command, your npm run dev):

{
  "ignore": ["**/*.test.ts", "**/*.spec.ts", "node_modules"],
  "watch": ["src"],
  "exec": "npm start",
  "ext": "ts"
}

Init a tsconfig file :

npx tsc --init --rootDir src --outDir dist --module commonjs --lib es2015  --sourceMap true --target es6 --esModuleInterop true

Create our folders :

mkdir src src/models src/services

You will get this ⬇️

Create our files :

touch src/index.ts src/index.html src/models/index.ts src/models/Socket.ts src/services/index.ts src/services/Socket.ts

Normally at this stage your hierarchy should look like this ⬇️

For the creation stage of the project, we are good !
Next step !

Code

Finally some code ! The fun part !

So, let's open vscode and begin with the index.ts file.

For this part, we will init a basic node server under express, you know that, no seret here so it's what's it's look like :

import express from "express"; // We import express as listener, you know.
import * as http from "http"; // We import http for init the server
// Anyway, if we don't do it, express does it secretly

const app =  express(); // Init express
const server = http.createServer(app); // Init server avec use express as listener
const port =  3000;

app.get("/", (req, res) => {
res.sendFile(__dirname +  "/index.html"); // We Will use the index.html file to see our work
});

server.listen(port, () => {
return console.log(`server is listening on ${port}`); // No need to comment that, no?
});

At this stage we just have a nodejs server running and returning a blank page.

Let's go on.

Let's prepare our index.html file, we just want to see the number of online users in real time.

Let's put this on it :

<div>
    <p>Number of users : <span id="numberOfUsers"></span></p>
</div>
<script src="/socket.io/socket.io.js"></script>
<script>

var socket = io("localhost:3000");
var numberOfUsers = document.getElementById("numberOfUsers");

socket.on("numberOfUser", function (data) {
  numberOfUsers.textContent = data;
});
</script>

Ah, finally our first reference to SocketIo, but what's going on?

Here we are initializing a SocketIo instance (with io('backend adress')) on the client side, this instance will try to connect to the socket "normally" available at your address localhost:3000, once connected this instance will wait for the emission of a "numberOfUser" event from your server (with socket.on('') method) .

However, your server doesn't have anything on this topic yet, so you'll just get an error if you test the page.

But let's continue.

We move on to the creation of the data model, because yes, we will send data from our socket, but to prevent the future complexity of our application we will stay clean and quickly create the data model.

Go on the src/models folder and put this into our file Socket.ts

export interface NumberOfUser {
  data?: number;
}

Oh, but next to our Socket.ts file, we have an index.ts file, let's take care of it, in case it's a "barrel", useful to efficiently organize all our future import/export.

So, use it and put this into it :

export * from "./Socket";

Ok, our model is ok, now we know what the data that will pass through our socket looks like.

Now let's take care of our Socket instance ! Finally !

So let's take care of the src/services folder, inside we have our little barrel index.ts (now you know what to do with it right? export blablabla)

Let's move on to the most important file, src/services/Socket.ts

We will finally use RxJS to create a variable that will be "Observable".

That is to say that a function (a callback), to be executed at each change of the data contained in this variable.

So we can make our socket react easily and dynamically!

We will also have a function that increments or decrements the numberOfUser value so that the client can see the changes when a visitor logs in/logs out.

In short here is the state of our famous file ⬇️

import * as socketio from "socket.io";
import * as http from "http"; // Just for typing, we like typing !
import { BehaviorSubject } from "rxjs";

import { NumberOfUser } from "../models/Socket"; // Here our model, cause we like typing things !

export class SocketService {
  private numberOfUser: BehaviorSubject<NumberOFUser> =
    new BehaviorSubject<NumberOFUser>({
      data: 0,
    }); // Here our "stream pipe" of the NumberOfUser Data.
  private numberOfUser$: Observable<NumberOFUser> =
    this.numberOfUser.asObservable(); // Here's our "Observable" data.

  private io!: socketio.Server; // Our Socket instance

  constructor(server: http.Server) {
    this.io = new socketio.Server(server, { cors: { origin: "*" } }); // We init our Socket instance with the server as parameter
  }

  public listenStore() {
    this.numberOfUser$.subscribe((store) => {
      // subscribe is called at each store value change !
      this.io.emit("numberOfUser", store.data); // So at each value change, we emit this value to the client with the event name "numberOfUser"
    });
  }

  public listenUserActivity() {
    this.io.on("connection", (client) => {
      // When a user do a connection at our socket, the "connection" event is called. It's a default event from socket.io.
      this.numberOfUser.next({
        data: this.numberOfUser.value.data + 1, // we get the actual value of our "Observable" and
      }); // we change the data with the function "next"

      client.once("disconnect", () => {
        // When a user do a disconnection, the "disconnect" event is called. It's a default event from socket.io.
        this.numberOfUser.next({
          data: this.numberOfUser.value.data - 1,
        }); // You know what next do now.
      });
    });
  }
}

And that it for the socket.ts file !

Now that we have a ready-made Socket service with the logic we want, we need to let our server know it exists.

To do this we will edit the src/index.ts file like this

import express from "express";
import * as http from "http";
import { SocketService } from "./services"; // We import our SocketService, Thanks to the index.ts file, we don't need to specify where exactly the Socket.ts file is located.

const app = express();
const server = http.createServer(app);
const port = 3000;

const socketService = new SocketService(server); // We instantiate our SocketService

app.get("/", (req, res) => {
  res.sendFile(__dirname + "/index.html");
});

socketService.listenStore(); // We ask to our service to listen the change of the "Observable" data and emit the change to our socket by the "numberOfUser" event.

socketService.listenUserActivity(); // We listen the activity of the socket and change the state of the "Observable" data when a desired event is triggered ("connection" or "disconnect")

server.listen(port, () => {
  return console.log(`server is listening on ${port}`);
});

So if we come back to the client side, we can see all our work !

When we load the page, we wan see the numberOfUser value change, also when we left the page.

It's work !

So you can start from there to make your logic more complex !

Extra

But what are you saying? Your client is not on the node side? You are using a front framework like Vuejs/Angular or Next.

No problem, just use the socket.io-client package on the front side and do like this ⬇️:

import { io, Socket } from "socket.io-client";
import { Observable, BehaviorSubject } from "rxjs";

export interface SocketData {
  numberOfUser?: number;
}

export class SocketService {
  private socket!: Socket;

  private store: BehaviorSubject<SocketData> = new BehaviorSubject<SocketData>({
    numberOfUser: 0,
  });
  private store$: Observable<SocketData> = this.store.asObservable();

  constructor() {
    this.socket = io("YOUR_BACKEND_URL");
    this.socket.on("numberOfUser", (data) => {
      this.emit(data); // At each "numberOfUser" event we modify our "Observable" data.
    });
  }

  public emit(store: SocketData): void {
    this.store.next(store);
  }

  public listen(): Observable<SocketData> {
    return this.store$; // You will be able to use this.socketService.listen().subscribe(), it's the same logic as we see above !
  }
}

I think we've seen the main part, so we can stop here!

In the next post, we will see how to deploy this under your own VPS under apache2, you will see it's simple!

See you !

Repo Github

NOPR9D / socketio-numberOfOnlineUser-ts

Code of the devto article "SocketIo Show Number of visitor"

Socket.io Show number of visitor

Code of the article Socket.io | Show Number of visitor

How to

Install

npm i

Run

npm start dev

Open an explorer on the adress : localhost:3000

View on GitHub

My portfolio in development where I implemented this socket

If you have any ideas, I'm listening! I hesitate to allow users to send each other emoji for example

edit 11/14/2022 : Set things a little more generic / Or simpler to add other "Observables" value

Easily create your own NGRX | Redux store

NOPR9D ☄️ — Fri, 14 Jan 2022 09:51:07 +0000

Easily create your own NGRX | Redux store

So you wanna use a store but you also wanna make it yourself, with a few lines of codes. (code at the end into a gist, we are with angular here, but you can do it anywhere)

You will see it's easy !

To do that we will use RxJS (and optionally but i definitely recommend it, ts-deepmerge)

We will also create a provider and annotate it with :

Cause we wanna only one instance of our StoreProvider on all our app.

We also need two property (from RxJS) into our StoreProvider, a BehaviorSubject and an Observable.

In case of you never use RxJS i give you a quick description of this two weird object :

Observable:
It's an entity who provide async events.
You can Subscribe to it (listen for new events/value, or call a callback at each update, etc ...)
Be careful, cause if you Subscribe after the observable's update, you will miss it, and on the first subscription, he hasn't got an initial value.
It's also called a hot observable (short explain : cause you can miss the update).

BehaviorSubject:
It's an entity who provide also async events, but he got an initial value.
Same recommendation as for the observable but with a variant, if you listen after the update, you will not had the initial value, but the last updated value.
It's also called a cold observable (short explain : cause the last update is stored).

Now let's code !

So we get our class StoreProvider with our two property store and store$, the default value four our store if the object : { value : 'I am a default value' }.

You remember when i said we will do it easily ? Now you just need two functions, Emit and Listen.

Emit : used to update our store

Listen : used to listen when our store is updated

To do it we need two RxJS operators, Filter and Map.

Filter : Useful if we want listen emition by condition (you don't be notified if the filter return false)

Map : Useful if we want map the updated value, in case of store with deep object.

Now the two function :

The function merge is from import merge from 'ts-deepmerge';

The Native equivalent is : const combined = {...this.store.value, ...store}
But is can be weird on realy deep object.

Like you see you can use a large store and filter it by property.

This is an example of store you can use.

And if you wanna listen only one property you can use listen like this :

Or like this if you wanna the global store :

For the use of emit, is simple, update what you need to update and that it

So now you can use your own store, not bad no ?

You can also go futher and customize it with your needs, etc...

See you soon !

Full code :

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import merge from 'ts-deepmerge';

@Injectable({ providedIn: 'root' })
export class StoreProvider {
 private store: BehaviorSubject<any> = new BehaviorSubject<any>({value:'I am a default value'});
 private store$: Observable<any> =this.store.asObservable();

     public emit(store: any): void {
        const combined = merge(this.store.value, store);
        this.store.next(combined as never);
    }

    public listen(
        property?: string
    ): Observable<any> {
        return property
            ? this.store$.pipe(
                  filter((value) => value && value[property]),
                  map((value) => value[property])
              )
            : this.store$.pipe(filter((value) => value));
    }
 }

You also had the article from 🦊 Reactive Fox 🚀, which provides more explanation and another way to do the same. (I used his articles a lot when I learned RxJs ^^)

cf : RxJS in Practice

(Also posted this article at Angular Nation, Join us ! https://www.angularnation.net/posts/easily-create-your-own-ngrx-redux-store)

Build Single Page App with Rx [From scratch]

NOPR9D ☄️ — Sat, 09 Jan 2021 20:11:37 +0000


How ?
Basic, add your Html
Implement RxJS from Scratch
Fetch html files, Generate components
Router and Pages
Exemple
Repo github

How ?

So, you have already worked on current frameworks like Angular, Vue or React and you wanna build a single page app.

But this time you wanna challenge yourself and build all from strach, if this is not enougth you also wanna implement your own RxJS.

Here we will see how we can do this, simply and efficiently.

So for this we will just use javascript, Html, Css and nodejs for live-refresh

Before if you want you can take a look to :

Basic, add your Html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>Exemple</title>
  </head>
  <body>
    <my-header></my-header>
    <div id="app"></div>
    <my-footer></my-footer>
  </body>
  <script type="module" src="./index.js"></script>
  <link rel="stylesheet" href="./styles/index.css" />
</html>

<script type="module" src="./index.js"></script>

Cause we import our script like a module, we import any other js file with "import { } from './any.js'" in our js file.

<my-header></my-header>

<my-footer></my-footer>

<div id="app"></div>

This is the container we will use for our single app view.

These Custom elements are undefined for the moment, later you will be able to replace 'my-' with your own naming convention.

Implement RxJS from Scratch

For this part we can say Thanks to Andrea Bertoli for Implements RxJS from Scratch, we will use a lighter version

So,

If you want to implements our own RxJS we need to begin with Subscriptions class, this is a container for functions, including the old one. When you call the unsubscribe method, each of there functions will be called.

// a container for functions
class Subscription {
  constructor() {
    this.teardowns = [];
  }
  add(teardown) {
    this.teardowns.push(teardown);
  }
  unsubscribe() {
    this.teardowns.forEach((teardown) => teardown());
    this.teardowns = [];
  }
}

Operator composition with pipe

The concept of pipe if simple, it combiens n functions, calling each with the output of the last one.
This is the logic we need to chain Observables, the pipe method will return another Observable.

const pipe = (...fns) => (val) => fns.reduce((acc, f) => f(acc), val);

With pipe, we need to implement the Observable abstraction with a class too.

When we init it, this class requires a function as argument initFunc, so he use the subscribe function, the initFunc will be called with the observer as argument.

const pipe = (...fns) => (val) => fns.reduce((acc, f) => f(acc), val);

class Observable {
  constructor(initFunc) {
    this.initFunc = initFunc;
  }
  subscribe(observer) {
    const subscription = new Subscription();
    const subscriber = new Subscriber(observer, subscription);
    const teardown = this.initFunc(subscriber);
    subscription.add(teardown);
    return subscription;
  }
  pipe(...fns) {
    // provide source Obx to each function returned from pipeable operators,
    // to start the chaining operation provide the current source Obx (this)
    return pipe(...fns)(this);
  }
}

At last we need to implement an proxy-like object, the role of Subscriber class is to stops the event propagation into the wrapped Observer if complete is called.

// a safe wrapper around observers
export default class Subscriber {
  constructor(_observer, _subscription) {
    this.observer = _observer;
    this.closed = false;
    this.subscription = _subscription;
    // 1. add an Observer completion logic to the Subscription container
    this.subscription.add(() => (this.closed = true)); // <- first function inside the subscription
  }
  next(value) {
    if (!this.closed) {
      this.observer.next(value);
    }
  }
  error(err) {
    if (!this.closed) {
      this.closed = true;
      this.observer.error(err);
      // 2. enable the Subscriber to call `unsubscribe` on completion
      this.subscription.unsubscribe(); // <- unsubscribe on error
    }
  }
  complete() {
    if (!this.closed) {
      this.closed = true;
      this.observer.complete();
      this.subscription.unsubscribe(); // <- unsubscribe on completion
    }
  }
}

Fetch html files | Generate components

Welcome to the fetch part ! Cause we are in local use and without any dependencies, we need to fetch ourself our html files. No, you can't import them like import * as htmlTemplate from './template.html.

But you know what? Now we had implemented our own RxJS, we can use an Observable instead of a Promise.

We can create a method called _fetchLocal in a api.js file, return a new Observable with the request value.

_fetchLocal will take the path and the name of the html file you wanna import. (So we can import page and components with the same function).

import Observable from "./../reactive/Observable.js";

export const _fetchLocal = (path, file) => {
  return new Observable((observer) => {
    const req = new XMLHttpRequest();
    const url = `${path}/${file}`;
    req.responseType = "text/html";
    req.open("GET", url);
    req.send();
    req.onloadend = (e) => {
      observer.next(req);
    };
  });
};

Now you can create a dom.js file and put in it the registerComponent function, this function will take the component Class as argument.

In this function you can customise your own naming convention for component or page (feel free to add your logic to this function)

export const registerComponent = (componentClass) => {
  const componentName = `my-${componentClass.name.toLowerCase()}`;
  customElements.define(componentName, componentClass);
};

Now we had your base and we can begin to work easier, let's create a compoments folder and create our first compomenents.

In it create files for footer and header (Footer.html,Footer.js,Header.html,Header.js), don't forget, we use Custom Elements, so in this case we extends our class to HTMLElement.

In the constructor we fetch the associated template with our _fetchLocal method.

<!-- footer -->
<div class="footer">
  Hey footer
</div>

import { _fetchLocal } from "./../scripts/api/index.js";

// Footer
export default class Footer extends HTMLElement {
  constructor() {
    super();
    _fetchLocal("/components", "Footer.html").subscribe({
      next: (data) => {
        this.innerHTML = data.response;
      },
    });
  }
}

<!-- header -->
<div class="flex-row">
  <nav class="nav">
    <a href="/" class="nav__link" data-link>Home</a>
    <a href="/dashboard" class="nav__link" data-link>Dashboard</a>
    <a href="/thispagedontexist" class="nav__link" data-link
      >This page don't exist</a
    >
  </nav>
</div>

// Header
export default class Header extends HTMLElement {
  constructor() {
    super();
  }
  connectedCallback() {
    _fetchLocal("/components", "Header.html").subscribe({
      next: (data) => {
        this.innerHTML = data.response;
      },
    });
  }
}

So, now we need to register our component.

In our main.js create a define method, we register all of our component in it, for that we use our registerComponent.

Put the define method in your init function.

import Header from "./../components/Header.js";
import Footer from "./../components/Footer.js";

import { _fetchLocal } from "./api/index.js";

import { registerComponent } from "./dom/index.js";

export function init() {
  define();
}

function define() {
  registerComponent(Header);
  registerComponent(Footer);
}

Router and Pages

We had our reactive logic, our components are reconized by the app, now we can attack the Router and Pages.

We begin with the easlier, like the components we can create the files for our pages, we also respect the component logic.

So we can create files for 404, Dashboard and Home into a pages folder. (404.html,404.js,Dashboard.html,Dashboard.js,Home.html,Home.js)

<!-- 404 -->
<div class="404">
  <div>Are you lost ?</div>
</div>

import { _fetchLocal } from "./../scripts/api/index.js";

export default class NotFound extends HTMLElement {
  constructor() {
    super();
    _fetchLocal("/components", "404.html").subscribe({
      next: (data) => {
        this.innerHTML = data.response;
      },
    });
  }
}

<!-- Dashboard -->
<div class="dashboard">
  <div>this is dashboard</div>
</div>

import { _fetchLocal } from "./../scripts/api/index.js";

export default class Dashboard extends HTMLElement {
  constructor() {
    super();
    _fetchLocal("/components", "Dashboard.html").subscribe({
      next: (data) => {
        this.innerHTML = data.response;
      },
    });
  }
}

<!-- Home -->
<div class="home">
  <div>this is home</div>
</div>

import { _fetchLocal } from "./../scripts/api/index.js";

export default class Home extends HTMLElement {
  constructor() {
    super();
    _fetchLocal("/components", "Home.html").subscribe({
      next: (data) => {
        this.innerHTML = data.response;
      },
    });
  }
}

So create a router folder and index.js file.

In our index.js file you can put our routing logic into and routes Object with path and component as key.

Like this :

export const routes = [
  { path: "/", component: "Home" },
  { path: "/dashboard", component: "Dashboard" },
  { path: "/home", component: "Home" },
  { path: "/404", component: "404" },
];

Now we need a Views class, so we can set the fetched HTML provided by the view into our #app container.

In the constructor get the user location pathname, compare it to the path of our routes, if no match we will show the 404 page.

The getHtml method return the result of _fetchLocal and the setView method put the fetched html into the #app container.

import { routes } from "./../router/index.js";
import { _fetchLocal } from "./../api/index.js";

export default class Views {
  layout;
  constructor() {
    this.layout = routes.filter((route) => {
      return route.path === location.pathname;
    })[0] || { component: "404" };
    this.getHtml().subscribe({ next: this.setView });
  }

  getHtml() {
    return _fetchLocal("/pages", `${this.layout.component}.html`);
  }

  setView(data) {
    document.querySelector("#app").innerHTML = data.response;
  }
}

Comeback to our main.js file and call an instance of Views class in the define function.

import Header from "./../components/Header.js";
import Footer from "./../components/Footer.js";

import { _fetchLocal } from "./api/index.js";

import { registerComponent } from "./dom/index.js";
import Views from "./dom/views.js";

export function init() {
  define();
}

function define() {
  registerComponent(Header);
  registerComponent(Footer);

  new Views();
}

For the presentation we can add a little of css, for auto-size and centered layout add this :

html,
body {
  height: 100%;
  width: auto;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* reset all */
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  padding: 0.25em;
}

#app {
  display: flex;
  flex-grow: 1;
  align-items: center;
  align-self: center;
}

Exemple

Now we can see our result with this online exemple. As you see we had our Header, our Footer and the layout of the #app container use our router logic and show the requested page. Our single page app is created, is reactive, all it's good !

Thanks for all reader if you had the courage to stand until the end.

Repo github

NOPR9D / html-js-single-app-rx

From scratch, no dependencies. With Router, ...

Single App with RxJS | no dependecies

Use a light reactive starter for your next web project. 🚀

View on GitHub

Update of Vue Rx to Vue Next Rx

NOPR9D ☄️ — Fri, 18 Dec 2020 11:32:12 +0000

link on npm: @nopr3d/vue-next-rx

Hello there !

The latest update of Vue is here, we are several to test it but we are still waiting for the update of certain dependencies.

So, instead of waiting I said to myself : "why don't you do it yourself?"

I chose the dependency with which I had the most affinity (vue-rx) and after a few days (and a lot of coffee) the dependency was up to date with Vue Next and its unit tests too.

Now let's talk about this dependency, Vue Next offers a lot of changes (new lifecycle hooks, composition API, performance improvements, multiple root node, ...)

So I took all the existing functionality of vue-rx and I took the opportunity to also extend new features (Ref and Watch)

For example is how you can use Ref and Watch with the reactive way :

Ref

import { ref } from "@nopr3d/rx-vue-next";

// use ref like an Rx Subject
export default defineComponent({
  name: "Home",
  components: {},
  setup() {
    const msg = ref("Message exemple");

    setTimeout(() => {
      msg.value = "New message !";
    }, 2000);

    msg.subscribe((value) => {
      console.log(value); // After 2s will print : New message !
    });

    return { msg };
  },
});

<!-- bind to it normally in templates -->
<!-- on change DOM is update too -->
<div>{{ msg }}</div>

Watch

import { ref, watch } from "@nopr3d/rx-vue-next";

export default defineComponent({
  name: "Home",
  components: {},
  setup() {
    const msg = ref("Message exemple");

    watch(msg).subscribe((val) => {
      console.log(val); // After 2s will print : New message !
    });

    setTimeout(() => {
      msg.value = "New message !";
    }, 2000);

    return { msg };
  },
});

<!-- bind to it normally in templates -->
<!-- on change DOM is update too -->
<div>{{ msg }}</div>

Of course updated the test on vue next (it wasn't easy haha)

The example folder is also updated

If you wanna test it you can install it with :

npm install vue @nopr3d/vue-next-rx rxjs --save

This is my first publish on npm, feel free to open an issue !

Thanks and have a good day !

link on npm: @nopr3d/vue-next-rx

repo: vue-next-rx

Run your own Alexa Skill locally (and test it) [JS]

NOPR9D ☄️ — Sat, 05 Dec 2020 18:05:31 +0000

So you had an Alexa device and you wanna make you own skill, here we will learn how we can make our custom skill and test it locally without depending Aws Lambda

First step install the ASK-CLI

npm install -g ask-cli

We will generate our skill starter with

ask new

Choose NodeJs, and self-hosted

Next step we will add Virtual-Alexa dependencies

npm install virtual-alexa --save-dev

Enter into the created folder and add a new node project with

npm init

Add this necessary dependencies

npm i ask-sdk-core ask-sdk-model
npm i virtual-alexa --save-dev

In your package.json file add this start script

 "scripts": {
    "start": "node index.js"
  }

And for the last step create a new file called index.js and we will :

Init an instance of Virtual alexa
Handle our lamdba function to it and add our options like locales, interaction models, ...
Start an intents
Print the result (alexa speech)

const va = require("virtual-alexa");
const _defaultHandler = va.VirtualAlexa.Builder()
  .handler("./lambda/index.js") // Lambda file
  .interactionModelFile("./skill-package/interactionModels/custom/en-US.json") // Interaction file
  .locale("en-US")
  .create();


_defaultHandler.intend("HelloWorldIntent").then((payload) => {
// Print speech to console
  console.log("OutputSpeech: " + payload.response.outputSpeech.ssml);
});

Run with

npm run start

If everything is ok you should be able to read the alexa's output speech in your console

And that it, now you can develop your skill and test the output without send your code.

So if we recap, we used the 'hello-world' starter generated by ASK-CLI, we added a node application next to it using the 'virtual-alexa' dependency

As long as we are there we can take the opportunity to add tests, no?

I promise it will take a minute.

We begin with dev dependencies, so wo can add mocha, chai and nyc

npm i mocha chai nyc --save-dev

Create a test folder, and a new "index-test.js" file, in your package.json add this test script :

"test": "nyc mocha test/*-test.js"

So now we can add the usual structure of a test file into 'index-test.js'.

const expect = require("chai").expect;
const VirtualAlexa = require("virtual-alexa").VirtualAlexa;

describe("Test hello world intent", async function() {
  const alexa = VirtualAlexa.Builder()
    .handler("./lambda/index.js") // Lambda function file and name
    .interactionModelFile("./skill-package/interactionModels/custom/en-US.json") // Path to interaction model file
    .create();

  it("Should be Hello World!", async function() {
    const helloWorldResponse = await alexa.intend("HelloWorldIntent");
    expect(helloWorldResponse.response.outputSpeech.ssml).to.include(
      "Hello World!"
    );
  });
});

run with

npm run test

If everything is ok you should be able to see our test result

And that's it ! Now you can write your skill logic, run and test it.

You can also take a look to Ask Toolkit for vscode

See also : Secure the endpoint of my Skills Alexa application (futur post?)

Rx Composition Api [Vue 3 | RxJS]

NOPR9D ☄️ — Fri, 20 Nov 2020 02:21:44 +0000

edit: you can use this package i made https://www.npmjs.com/package/@nopr3d/vue-next-rx

Hi !

Vue 3 is here, is fresh but we have to wait for our preferred dependences.

So vue-rx work only with Vue 2 and I think you are wondering how we can use rxjs with the new version of vue? (I'm)

So, this is how we can extend the composition Api

Ref

import { Observer, Observable, Subject } from "rxjs";
import { onBeforeUnmount, ref as _ref, Ref as _Ref, watch } from "vue";

export type Ref<T = any> = _Ref<T> & Observer<T> & Observable<T>;

export function ref(value?: unknown): Ref {
  const $ref = _ref(value) as Ref;
  const subject = new Subject();

  // extend your ref to rx and bind context
  $ref.next = subject.next.bind(subject);
  $ref.pipe = subject.pipe.bind(subject);
  $ref.subscribe = subject.subscribe.bind(subject);



  watch($ref, (val) => {
    subject.next(val);
  });

  // Don't forget to unsubscribe or you will get memory leaks
  onBeforeUnmount(() => subject.unsubscribe()); 
  return $ref;
}

Watch

import {
  watch as _watch,
  WatchStopHandle as _WatchStopHandle,
} from "vue";

export type WatchStopHandle<T = any> = Observer<T> &
  Observable<T> &
  (() => void);

export function watch(ref: Ref, fn?: (val: any) => any): WatchStopHandle {

  const subject = new Subject();
  const $watch = _watch(ref, (val) => {
    subject.next(val);
    if (fn) fn(val);
  }) as WatchStopHandle;

  $watch.next = subject.next.bind(subject);
  $watch.pipe = subject.pipe.bind(subject);
  $watch.subscribe = subject.subscribe.bind(subject);

  onBeforeUnmount(() => subject.unsubscribe());

  return $watch;
}

So we can use the return of our composition function like any usual observable.

// Create your own vue folder, store your custom api here
import { ref, watch } from "@/vue";

export default {
  name: "App",
  setup() {
    const tick = ref(0);

    setInterval(() => {
      tick.value++;
    }, 1000);

    // subscribe and do something at every change

    // With Ref
    tick.subscribe((value)=>{console.log(value)}); 

   // With Watch
    watch(tick)
        .pipe(map((val) => val * 1000))
        .subscribe(console.log);

    return { tick };
  },
};

Demo :

Create a background with GLSL Shader [Threejs | Typescript]

NOPR9D ☄️ — Tue, 17 Nov 2020 04:28:44 +0000

Hi to all!

Lately I had a little fun with 3D in javascript, and that's why I'm doing a first post. We will use Threejs and GLSL Shaders.

We will learn how we can make a background like this :

GLSL Shaders are designed for use with graphics and contain functionality for manipulating vectors and matrices.

The shader syntax that three.js uses is GLSL and this code is compiled and run on the GPU using WebGL, here we apply this to a Plane Geometry but you can also do it for any 3D elements having a ShaderMaterial.

Normally Shaders always begin with a version declaration, followed by a list of input and output variables, uniforms and its main function but with Threejs we just need variales, uniforms and function.

// Default Vertex for threejs
precision mediump float;

varying vec2 vUv;

  void main() {
     vUv = uv;
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
              }

// Default Fragment for threejs
out vec4 fragColor;

void main() {
    fragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }

And yeah, as you can see we have two files, vertex shader and fragment shader.

Vertex Shader : Here you can operate all change to deform an object in a shader, your code will be done on every vertices.
Fragment Shader : It will take the output from the vertex shader and associates colors, depth value, ...

So now we're done with the shader presentations, and I guess we don't need to introduce Threejs.

As always with threejs we need to initialize the scene.

  private scene!: THREE.Scene;
  private camera!: THREE.PerspectiveCamera;
  private light!: THREE.SpotLight;
  private renderer!: THREE.WebGLRenderer;
  private clock!: THREE.Clock;

  public init(canvas: HTMLCanvasElement) {
    // Scene
    this.scene = new THREE.Scene();
    this.scene.background = new THREE.Color(0xe3e3e3);

    // Light
    this.light = new THREE.SpotLight(0xffffff, 1);

    // Camera
    const fov = 45;
    const aspect = window.innerWidth / window.innerHeight;
    const near = 1;
    const far = 100;
    this.camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

   // Renderer
   this.renderer = new THREE.WebGLRenderer({
      canvas: canvas
    });
    this.renderer.setClearColor(0xffffff, 1);
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setSize(window.innerWidth, window.innerHeight);

    this.clock = new THREE.Clock();
}

We have our scene, now we need our 3D elements, we will use PlaneBufferGeometry for a flat surface and ShaderMaterial to apply custom shaders.

this.geometry = new THREE.PlaneBufferGeometry(30, 10);

this.material = new THREE.ShaderMaterial({
      vertexShader: "HERE-CUSTOM-VERTEX",
      fragmentShader: "HERE-CUSTOM-FRAGMENT",
      // Here you can pass args to your shaders (material or data).
      // Exemple "uResolution" in .ts >>>> input as "varying vec2 uResolution" in .glsl;
      // uResolution for responsive, uTime will be use by THREE.Clock
      uniforms: {
        uTime: { value: 0.0 },
        uResolution: { value: { x: window.innerWidth, y: window.innerHeight } },
        uColor: { value: new THREE.Color(0xffffff) }
      }
    });
this.mesh = new THREE.Mesh(this.geometry, this.material);

Add all to our scene and look at our plane object.

    this.scene.add(this.camera);
    this.scene.add(this.mesh);
    this.scene.add(this.light);
    this.mesh.position.set(0, 0, 0);
    this.camera.position.set(0, 0, 10);
    this.light.position.set(0, 0, 10);

    this.light.lookAt(this.mesh.position);
    this.camera.lookAt(this.mesh.position);

Now we can finally animate our scene, we will be careful to make everything responsive


 public run() {
    window.requestAnimationFrame(this.run.bind(this));
    // Update Shaders uTime value
    this.material.uniforms.uTime.value = this.clock.getElapsedTime();
    this.renderer.render(this.scene, this.camera);
   }

  private addEvents(): void {
    window.addEventListener("resize", this.onResize.bind(this), false);
  }

  private onResize() {
    // Update Shader uResolution value
    this.material.uniforms.uResolution = {
      value: { x: window.innerWidth, y: window.innerHeight }
    };
    this.camera.aspect = window.innerWidth / window.innerHeight;
    this.camera.updateProjectionMatrix();
    this.renderer.setSize(window.innerWidth, window.innerHeight);
  }
}


const scene = new CustomScene();
scene.init(document.getElementById("canvas") as HTMLCanvasElement);
scene.run();

And Voila !

DEV Community: NOPR9D ☄️

Socket.io | Show Number of visitor

Table Of Contents

Creation

We create a new folder for our project and enter on it :

We init our new node project :

We add our beautiful dependencies ! :

Prepare the live reloading with this as script in your package.json

Init a tsconfig file :

Create our folders :

Create our files :

Code

Extra

Repo Github

NOPR9D / socketio-numberOfOnlineUser-ts

Code of the devto article "SocketIo Show Number of visitor"

Socket.io Show number of visitor

How to

Install

Run

Easily create your own NGRX | Redux store

Build Single Page App with Rx [From scratch]

How ?

Basic, add your Html

Implement RxJS from Scratch

Fetch html files | Generate components

Router and Pages

Exemple

Repo github

NOPR9D / html-js-single-app-rx

From scratch, no dependencies. With Router, ...

Single App with RxJS | no dependecies

Update of Vue Rx to Vue Next Rx

Ref

Watch

Run your own Alexa Skill locally (and test it) [JS]

Rx Composition Api [Vue 3 | RxJS]

Ref

Watch

Create a background with GLSL Shader [Threejs | Typescript]