ft_transcendence/frontend/static/js/views/Chat.js

import AbstractView from "./AbstractView.js";

export default class extends AbstractView {
    constructor(params) {
        super(params, "Chat");

		let url = `ws://${window.location.host}/ws/socket-server/`

		this.chatSocket = new WebSocket(url)
		this.chatSocket.onmessage = function(e){
			let data = JSON.parse(e.data)
			console.log('Data:', data)
			if (data.type === 'chat') {
				let messages = document.getElementById('messages')

				let username = data.username === null || data.username.length <= 0 ? "NoName" : data.username;
				messages.insertAdjacentHTML('beforeend', `
					<div><p>${username}: ${data.message}</p></div>
				`)
			}

		}
    }

	async postInit() {
		let form = document.getElementById('form')
		form.addEventListener('submit', (e)=> {
			e.preventDefault()
			let message = e.target.message.value
			this.chatSocket.send(JSON.stringify({
				'message':message
			}))
			form.reset()
		})

	}

	async leavePage() {
		this.chatSocket.close();
	}

    async getHtml() {
        return `
			<h1>Chat</h1>

			<form id="form">
				<input type="text" name="message" placeholder="message"/>
			</form>

			<div id="messages">

			</div>

        `;
    }
}