Cover image for Chat made with Deno

Chat made with Deno

assisfery profile image Assis Ferreira ・2 min read

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

Alt Text

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) {


        wss.clients.forEach(function each(client) {
            if (!client.isClosed) {



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");

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


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

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


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


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


    clientWS.onmessage = function (event) {

        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>');
                $("#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() == "")

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



Posted on Jun 1 by:

assisfery profile

Assis Ferreira


a simple programmer fascinated by technologies and all that can bring to our civilization


markdown guide

This is my introduction to Deno and Rust. amazing