Deno: How to use WebSocket with oak? - websocket

Question

As Deno was released last Wednesday, I tried to play with it and redo the little example Chat App, I tried this:
import { Application, Router, send } from 'https://deno.land/x/oak/mod.ts';
import { listenAndServe } from 'https://deno.land/std/http/server.ts'
const app = new Application();
const router = new Router();
router
.get('/ws', handleSocket);
app.use(router.routes());
app.use(router.allowedMethods());
await app.listen({ port: HTTP_PORT });
app.ts
import { WebSocket, acceptWebSocket, isWebSocketCloseEvent, acceptable } from 'https://deno.land/std/ws/mod.ts'
import { v4 } from 'https://deno.land/std/uuid/mod.ts'
const users = new Map<string, WebSocket>()
export const handleSocket = async (ctx: any) => {
if (acceptable(ctx.request.serverRequest)) {
const { conn, r: bufReader, w: bufWriter, headers } = ctx.request.serverRequest;
const socket = await acceptWebSocket({
conn,
bufReader,
bufWriter,
headers,
});
await socketEventHandlers(socket);
} else {
throw new Error('Error when connecting websocket');
}
}
...
export const socketEventHandlers = async (ws: WebSocket): Promise<void> => {
// Register user connection
const userId = v4.generate()
users.set(userId, ws)
await broadcast(`> User with the id ${userId} is connected`)
// Wait for new messages
for await (const event of ws) {
const message = typeof event === 'string' ? event : ''
await broadcast(message, userId)
// Unregister user conection
if (!message && isWebSocketCloseEvent(event)) {
users.delete(userId)
await broadcast(`> User with the id ${userId} is disconnected`)
}
}
}
socket.ts
The websocket connection works perfectly with the import { listenAndServe } from 'https://deno.land/std/http/server.ts'
, but with the code above I got errors like WebSocket connection to 'ws://localhost:3000/ws' failed: Invalid frame header.
Does anybody have any tips to solve it? Thx ;)

Answer 1

TL;DR - This has been updated since answer was accepted and is much simpler now.
router.get('/ws', async ctx => {
const sock = await ctx.upgrade();
handleSocket(sock);
});
Credit https://github.com/oakserver/oak/pull/137

Answer 2

The issue happens because you're using the wrong version of the libraries. Always use versioned URLs in Deno.
For Deno 1.0.0, you'll need to use oak v4.0.0 & std v0.51.0
app.ts
import { Application, Router, send } from 'https://deno.land/x/oak#v4.0.0/mod.ts';
socket.ts
import { WebSocket, acceptWebSocket, isWebSocketCloseEvent, acceptable } from 'https://deno.land/std#0.51.0/ws/mod.ts'
import { v4 } from 'https://deno.land/std#0.51.0/uuid/mod.ts'
Once you make those changes, you'll be able to connect correctly to the WebSocket Server.
const ws = new WebSocket("ws://127.0.0.1:8080/ws")
ws.onopen = function () {
ws.send('OAK is working!')
}