Websocket connection in Deno

Question

Good morning all,

I am experimenting with Deno and Oak framework. I want to do a WebSocket connection between the front-end and the back-end. I know how to do it using the Deno standard library ('HTTP') but when trying to use Oak, I keep running into errors.

My current code is:

import { Application, Router } from "https://deno.land/x/[email protected]/mod.ts";
import { WebSocket, acceptWebSocket, isWebSocketCloseEvent, acceptable } from 'https://deno.land/[email protected]/ws/mod.ts';
import { staticFileMiddleware } from './staticFileMiddleware.ts';

const app = new Application();
const router = new Router();

router
.get('/', (ctx) => {
    ctx.response.redirect('/index.html');
})

.get('/ws', async (ctx: any) => {
    // console.log(ctx.request.serverRequest);
    const sock = await ctx.upgrade();
    let id = socks.push(sock) - 1;
    for await (const ev of sock);
    socks.splice(id, 1);
    if (acceptable(ctx.request.serverRequest)) {
        const { conn, r: bufReader, h: bufWriter, headers } = ctx.request.serverRequest;
        const socket = await acceptWebSocket({
            conn,
            bufReader,
            bufWriter,
            headers
        });
        await chat(socket);
    } else {
        throw new Error('Error when connecting websocket');
    }
});

app.use(router.routes());
app.use(router.allowedMethods());
app.use(staticFileMiddleware);

app.addEventListener('listen', ({hostname, port, secure}) => {
    console.log(`Listening on ${secure ? 'https://' : 'http://'}${hostname || 'localhost'}:${port}`)
});

app.addEventListener('error', e => {
    console.log(e.error);
});

await app.listen({ port: 3000 });


async function chat(ws: WebSocket) {
    console.log(`Connected`);
    for await (let data of ws) {
        console.log(data, typeof data);
        ws.send('Your message was successfully received');
        if (isWebSocketCloseEvent(data)) {
            console.log('Goodbye');
            break;
        }
    }
}

My static file middleware is:

import { Context, send } from "https://deno.land/x/[email protected]/mod.ts";

export const staticFileMiddleware = async (ctx: Context, next: Function) => {
    const path = `${Deno.cwd()}/public${ctx.request.url.pathname}`;
    if (await fileExists(path)) {
        await send(ctx, ctx.request.url.pathname, {
            root: `${Deno.cwd()}/public`
        })
    } else {
        await next();
    } 
}

async function fileExists(path: string) {
    try {
        const stats = await Deno.lstat(path);
        return stats && stats.isFile;
    } catch (e) {
        if (e && e instanceof Deno.errors.NotFound) {
            return false;
        } else {
            throw e;
        }
    }
}

The client-side code includes:

let ws;

window.addEventListener('DOMContentLoaded', () => {
    ws = new WebSocket(`ws://localhost:3000/ws`);
    ws.addEventListener('open', onConnectionOpen);
    ws.addEventListener('message', onMessageReceived);
});

function onConnectionOpen() {
    console.log('Connection Opened');
    ws.send('I am sending a message from the client side');
}

function onMessageReceived(event) {
    console.log('Message Received', event);
}

My file structure is as follow:

server.ts
staticFileMiddleware.ts
/public
   -client.js
   -index.html

I would greatly appreciate it if you could help me and point me into the right direction. Thank you in advance for your help!!!

Answer 1

I have copied above code and tried to run, i was getting error in sock.push() block

const sock = await ctx.upgrade();
let id = socks.push(sock) - 1;
for await (const ev of sock);
socks.splice(id, 1);

So removed that unnecesory code. of server.ts

While destructing the ctx.request.serverRequest i see there is h:bufWriter is undefined there and throwing the error like,

failed to accept websocket: TypeError: Cannot read property 'write' of undefined

Here is the updated code,

import { Application, Router } from "https://deno.land/x/[email protected]/mod.ts";
import {
  acceptWebSocket,
  isWebSocketCloseEvent,
  isWebSocketPingEvent,
  WebSocket,
  acceptable
} from "https://deno.land/std/ws/mod.ts";
import { staticFileMiddleware } from './staticFileMiddleware.ts';

const app = new Application();
const router = new Router();

router
  .get('/', (ctx) => {
    ctx.response.redirect('/index.html');
  })

  .get('/ws', async (ctx: any) => {
    await ctx.upgrade();
    if (acceptable(ctx.request.serverRequest)) {
      const { conn, r: bufReader, w: bufWriter, headers } = ctx.request.serverRequest;
      acceptWebSocket({
        conn,
        bufWriter,
        bufReader,
        headers,
      })
        .then(chat)
        .catch(async (err) => {
          console.error(`failed to accept websocket: ${err}`);
        });
    } else {
      throw new Error('Error when connecting websocket');
    }
  });

app.use(router.routes());
app.use(router.allowedMethods());
app.use(staticFileMiddleware);

app.addEventListener('listen', ({ hostname, port, secure }) => {
  console.log(`Listening on ${secure ? 'https://' : 'http://'}${hostname || 'localhost'}:${port}`)
});

app.addEventListener('error', e => {
  console.log(e.error);
});

await app.listen({ port: 3000 });


async function chat(ws: WebSocket) {
  console.log(`Connected`);
  for await (let data of ws) {
    console.log(data, typeof data);
    ws.send('Your message was successfully received');
    if (isWebSocketCloseEvent(data)) {
      console.log('Goodbye');
      break;
    }
  }
}

deno run --allow-net --allow-read server.ts

Answer 2

I took a slightly different approach and it works for messaging Joe, which should make it adaptible for your needs and solution/question.

/*
running with Deno 1.2
deno run --inspect --allow-net ./beautiful-socket.js
*/
import { Application, Router, HttpError, send, Status } from "https://deno.land/x/[email protected]/mod.ts";
import { acceptable } from "https://deno.land/[email protected]/ws/mod.ts";

const port = 8123;
const users = new Set();
const app = new Application({state:{users}});
const router = new Router();

function broadcastEach(user){
    user.send(this);
}
function broadcast(msg){
    console.log('---broadcasting--->', typeof msg, msg);
    users.forEach(broadcastEach, msg);
}

router.get('/socket', async (context, next) => {
    context.response.status = 204;
    if( !acceptable(context.request.serverRequest) ){
        context.response.status = 400;
        throw new Error(`not upgradable to WebSocket`);
    }

    const socket = await context.upgrade();
    users.add(socket);
    broadcast(`hello! ${ socket.conn.rid }`);
    for await (const ev of socket) {
        if(socket.isClosed){
            users.delete(socket);
            broadcast(`bye! ${ socket.conn.rid }`);
            break;
        }else{
            broadcast(ev);
        };
    }
});

router.get('/', async (context) => {
    context.response.body = `<!doctype html>
<html><body>
<p>let's chat...open the console to chat it up</p>
<script>
console.log(123);
const pipe = new WebSocket("ws://${context.request.url.host}/socket");
function fire(ev){
    switch(ev.type){
    case 'message':
        switch(typeof ev.data){
        case 'string':
            console.log('msg text', ev.data);
        break;
        case 'object':
            ev.data.arrayBuffer().then(ab=>{ console.log(new Uint8Array(ab)); });
        break;
        }
    break;
    default:
        console.log(ev.type ,ev);
    }
}
function hello(msg){
    if(msg === undefined){
        msg = new ArrayBuffer(4);
        const uint = new Uint8Array(msg);
        uint[0] = 4;
        uint[1] = 3;
        uint[2] = 2;
        uint[3] = 1;
    }
    pipe.send(msg);
}

pipe.addEventListener('open', fire);
pipe.addEventListener('close', fire);
pipe.addEventListener('message', fire);
pipe.addEventListener('error', fire);


</script>
</body></html>
`;
});

app.use(router.routes());
app.use(router.allowedMethods());

app.addEventListener('error', (ev)=>{
    console.error(ev);
    debugger;
});

app.addEventListener('listen', (server)=>{
    console.log(`open ${ server.secure ? 'https':'http' }://${ server.hostname }:${ server.port }`);
});
const whenClosed = app.listen(`:${port}`);
await whenClosed;
console.log(`closed http :${port}, bye`);