52 lines
1.0 KiB
JavaScript
52 lines
1.0 KiB
JavaScript
import AbstractView from "./AbstractView.js";
|
|
|
|
export default class extends AbstractView {
|
|
constructor(params) {
|
|
super(params);
|
|
this.setTitle("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')
|
|
|
|
messages.insertAdjacentHTML('beforeend', `
|
|
<div><p>${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 getHtml() {
|
|
return `
|
|
<h1>Chat</h1>
|
|
|
|
<form id="form">
|
|
<input type="text" name="message" />
|
|
</form>
|
|
|
|
<div id="messages">
|
|
|
|
</div>
|
|
|
|
`;
|
|
}
|
|
}
|