Skip to content
Snippets Groups Projects
Verified Commit 6ce8f438 authored by Miniontoby's avatar Miniontoby :writing_hand_tone1:
Browse files

Added socket.io server

parent 4d3d82ee
No related branches found
No related tags found
No related merge requests found
import http from 'http';
import express from 'express';
import injectSocketIO from './socketIoHandler.js';
import { handler } from './build/handler.js';
const app = express();
const server = http.createServer(app);
// Inject SocketIO
injectSocketIO(server);
// SvelteKit handlers
app.use(handler);
server.listen(3000, () => {
console.log('Running on http://localhost:3000');
});
\ No newline at end of file
import { Server } from 'socket.io';
export default function injectSocketIO(server) {
const io = new Server(server);
io.on('connection', (socket) => {
let username = `User ${Math.round(Math.random() * 999999)}`;
socket.emit('name', username);
socket.on('message', (message) => {
io.emit('message', {
from: username,
message: message,
time: new Date().toLocaleString()
});
});
});
console.log('SocketIO injected');
}
\ No newline at end of file
import ioClient from 'socket.io-client';
const ENDPOINT = new URL(import.meta.url).origin;
const socket = ioClient(ENDPOINT);
export const io = socket;
\ No newline at end of file
<script lang="ts">
import { io } from '$lib/webSocketConnection.js';
import { onMount } from 'svelte';
let textfield = '';
let username = '';
let messages = [];
onMount(() => {
io.on('message', (message) => {
messages = [...messages, message];
});
io.on('name', (name) => {
username = name;
});
});
function sendMessage() {
const message = textfield.trim();
if (!message) return;
textfield = '';
io.emit('message', message);
}
</script>
<div class="h-screen w-screen bg-zinc-800">
<div class="h-full w-full max-w-md mx-auto bg-zinc-500 flex flex-col">
<header
class="px-6 py-4 border-b border-zinc-800 bg-zinc-700 text-white shrink-0 flex items-center justify-between"
>
<span class="font-bold text-xl">My Chat app</span>
<span>{username}</span>
</header>
<div class="h-full w-full p-4">
{#each messages as message}
<div class="bg-zinc-300 rounded-xl rounded-tl-none px-4 py-3 my-4 w-fit">
<span class="flex items-center space-between gap-4">
<b>{message.from}</b>
<i>{message.time}</i>
</span>
{message.message}
</div>
{/each}
</div>
<form
action="#"
on:submit|preventDefault={sendMessage}
class="px-6 py-4 border-t border-zinc-800 bg-zinc-700 text-white shrink-0 flex items-center"
>
<input
type="text"
bind:value={textfield}
placeholder="Type something..."
class="bg-transparent border-none px-4 py-3 w-full"
/>
<button type="submit" class="shrink-0 border border-white rounded-lg px-4 py-3">Send</button>
</form>
</div>
</div>
\ No newline at end of file
import { sveltekit } from '@sveltejs/kit/vite'; import { sveltekit } from '@sveltejs/kit/vite';
import { nodeLoaderPlugin } from '@vavite/node-loader/plugin'; import { nodeLoaderPlugin } from '@vavite/node-loader/plugin';
import { defineConfig } from 'vite'; import { defineConfig } from 'vite';
import { webSocketServer } from './webSocketPluginVite.js';
export default defineConfig(({ mode }) => { export default defineConfig(({ mode }) => {
/** @type {any} */ /** @type {any} */
let plugins = [sveltekit()]; let plugins = [sveltekit(), webSocketServer];
if (mode === 'development') { if (mode === 'development') {
plugins = [nodeLoaderPlugin(), ...plugins]; plugins = [nodeLoaderPlugin(), ...plugins];
} }
......
import injectSocketIO from './socketIoHandler.js';
export const webSocketServer = {
name: 'webSocketServer',
configureServer(server) {
injectSocketIO(server.httpServer);
},
configurePreviewServer(server) {
injectSocketIO(server.httpServer);
}
};
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment