Chat made with Deno

#typescript #javascript #deno #websocket

There are few days that was launched the Deno, a new JavaScript and TypeScript runtime built in Rust. In this project we use that technology to create a simple web chat.

The project code is hosted in that repository: https://github.com/assisfery/WebSocket-Chat-made-with-Deno

Web Server

Here we load the Web Server module to host our index file.

import { listenAndServe } from "https://deno.land/std/http/server.ts";

listenAndServe({port: 8000}, async(req) => {

    if(req.method == "GET" && req.url == "/")
        req.respond({ body: await Deno.open('index.html') });

});

WebSocket Server

We load the WebSocket client and WebSocket Serve module,
to listen client message and broadcast to every user connected.

import { WebSocket, WebSocketServer } from "https://deno.land/x/websocket/mod.ts";

const wss = new WebSocketServer(8080);

wss.on("connection", function (ws: WebSocket) {

    ws.on("message", function (message: string) {

        console.log(message);

        wss.clients.forEach(function each(client) {
            if (!client.isClosed) {
                client.send(message);
            }
        });

    });

});

WebSocket Client

In our index file we handle our WebSocket client using JavaScript native API.

var userName = null;
var clientWS = null;

function main()
{
    if($("#usr").val() == "")
    {
        swal("Warning", "Empty name!", "warning");
        return;
    }

    userName = $("#usr").val();

    $("#loader").show();
    $("#sign-in").hide();

    clientWS = new WebSocket("ws://localhost:8080");

    clientWS.onopen = function (event) {
        swal("Conneceted", "Connected successfully!", "success");

        $("#loader").hide();
        $("#chatbox").show();           
    };

    clientWS.onerror = function (event) {
        swal("Error", "Something happens!", "error");

        $("#chatbox").hide();
        $("#sign-in").show();           
    };

    clientWS.onclose = function (event) {
        swal("Closed", "Your connection was closed!", "info");

        $("#chatbox").hide();
        $("#sign-in").show();           
    };

    clientWS.onmessage = function (event) {
        console.log(event.data);

        var message = JSON.parse(event.data);

        if(message.type == "message")
        {
            if(message.user != userName)
                $("#message-box").append('<div><div class="bubble"><b>' + message.user + ': </b>' + message.content + '</div></div>');
            else
                $("#message-box").append('<div class="text-right"><div class="bubble bubble-info"><b>' + message.user + ': </b>' + message.content + '</div></div>');
        }


    };
}

function send()
{
    if($("#msg").val() == "")
        return;

    var message = {
        type: "message",
        user: userName,
        content: $("#msg").val(),
    };

    clientWS.send(JSON.stringify(message));

    $("#msg").val("");
}