Skip to content

Connection to polling-xhr.js fails if ending / is missing in path #25

Description

@kimdcottrell

Describe the bug

In the browser, this error gets thrown:

GET http://0.0.0.0:3000/ws/?EIO=4&transport=polling&t=juav6kqr 404 (Not Found)

All because a backslash is missing on the server-side parameters for the Server object.

To Reproduce

Client side:

<script src="https://cdn.socket.io/4.8.1/socket.io.min.js"></script>
<script>
const socket = io({
	path: '/ws',
});
const form = document.getElementById('form');
const input = document.getElementById('input');
const messages = document.getElementById(
	'messages',
);

form.addEventListener('submit', (e) => {
	e.preventDefault();
	if (input.value) {
		socket.emit('chat message', input.value);
		input.value = '';
		console.log('literally screaming');
	}
});

socket.on('chat message', (msg) => {
	console.log('literally heard you');
	const item = document.createElement('li');
	item.textContent = msg;
	messages.appendChild(item);
	window.scrollTo(0, document.body.scrollHeight);
});

Server side:

import { Server } from 'https://deno.land/x/socket_io@0.2.1/mod.ts';
import { Application, Router } from 'https://deno.land/x/oak@14.2.0/mod.ts';

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

router.get('/', async (ctx) => {
	const index = await Deno.readTextFile('/app/src/chat/index.html');
	try {
		ctx.response.headers.set('Content-Type', 'text/html');
		ctx.response.body = index;
	} catch {
		console.log('index is missing');
	}
});

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

const io = new Server({
	path: '/ws', // this is the problem. to fix, change to '/ws/'
});

// server
io.on('connection', (socket) => {
	console.log(`socket ${socket.id} connected`);

	//   io.emit("hello", "world");
	socket.on('chat message', (msg) => {
		io.emit('chat message', msg);
	});

	socket.on('disconnect', (reason) => {
		console.log(`socket ${socket.id} disconnected due to ${reason}`);
	});
});

const handler = io.handler(async (req) => {
	return await app.handle(req) || new Response('501', { status: 501 });
});

Deno.serve({
	handler,
	port: 3000,
});

Expected behavior

The ending / should not effect whether or not this works.

Screenshots

This should be clear enough, but I'm happy to post if needed.

Platform:

Google chrome.

Additional context

N/A

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions