39 lines
1.1 KiB
HTML
39 lines
1.1 KiB
HTML
<!doctype html>
|
|
<form name="publish">
|
|
<input type="text" name="message" maxlength="50"/>
|
|
<input type="submit" value="Send"/>
|
|
</form>
|
|
|
|
<div id="messages"></div>
|
|
|
|
<script>
|
|
let url = location.host == 'localhost' ?
|
|
'ws://localhost:8080/ws' : location.host == 'javascript.local' ?
|
|
`ws://javascript.local/article/websocket/chat/ws` : // dev integration with local site
|
|
`wss://javascript.info/article/websocket/chat/ws`; // prod integration with javascript.info
|
|
|
|
let socket = new WebSocket(url);
|
|
|
|
// send message from the form
|
|
document.forms.publish.onsubmit = function() {
|
|
let outgoingMessage = this.message.value;
|
|
|
|
socket.send(outgoingMessage);
|
|
return false;
|
|
};
|
|
|
|
// handle incoming messages
|
|
socket.onmessage = function(event) {
|
|
let incomingMessage = event.data;
|
|
showMessage(incomingMessage);
|
|
};
|
|
|
|
socket.onclose = event => console.log(`Closed ${event.code}`);
|
|
|
|
// show message in div#messages
|
|
function showMessage(message) {
|
|
let messageElem = document.createElement('div');
|
|
messageElem.textContent = message;
|
|
document.getElementById('messages').prepend(messageElem);
|
|
}
|
|
</script>
|