108 lines
3.0 KiB
JavaScript
108 lines
3.0 KiB
JavaScript
var msgerChat = null;
|
|
var socketurl = 'wss://rpiwss.greinet.com:8083/';
|
|
|
|
/** Standartnachricht ausgeben und Websocket-Verbindung aufbauen */
|
|
window.onload=function(){
|
|
/* DOM-Variablen initialisieren */
|
|
var msgerForm = get(".msger-inputarea");
|
|
var msgerInput = get(".msger-input");
|
|
msgerChat = get(".msger-chat");
|
|
|
|
/* Standard Wilkommensnachricht ausgeben */
|
|
appendMessage(BOT_NAME, BOT_IMG, "left", "Hi, wilkommen beim Raspi-Bot!");
|
|
|
|
/* Websocket initialisieren */
|
|
var socket = new WebSocket(socketurl, 'chat');
|
|
var username = 'u1'
|
|
socket.onopen = function () {
|
|
username = "name" + Math.floor(Math.random() * Math.floor(700));
|
|
socket.send('{"type": "join", "name":" '+username+'"}');
|
|
}
|
|
|
|
/* Aktion bei Nachrichteneingang festlegen */
|
|
socket.onmessage = function (msg) {
|
|
var data = JSON.parse(msg.data);
|
|
if(data.type == 'msg'){
|
|
if(data.name !== "Raspi-Bot" ){
|
|
appendMessage("Nutzer", PERSON_IMG, "right", data.msg);
|
|
}else{
|
|
appendMessage(BOT_NAME, BOT_IMG, "left", data.msg);
|
|
}
|
|
}
|
|
};
|
|
|
|
/* Aktion zum Absenden einer Nachricht festlegen */
|
|
msgerForm.addEventListener("submit", event => {
|
|
event.preventDefault();
|
|
const msgText = msgerInput.value;
|
|
if (!msgText) return;
|
|
socket.send('{"type": "msg", "msg": "' + msgerInput.value + '"}');
|
|
msgerInput.value = "";
|
|
});
|
|
}
|
|
|
|
/* Icons und Botname für die Chat-Bubbles */
|
|
const BOT_IMG = "https://image.flaticon.com/icons/svg/327/327779.svg";
|
|
const PERSON_IMG = "https://image.flaticon.com/icons/svg/145/145867.svg";
|
|
const BOT_NAME = "Raspi-Bot";
|
|
|
|
/**
|
|
* Neue Nachricht ins HTML hinzufügen
|
|
*
|
|
* @param img for the backround of the bubble
|
|
* @param side eighter left or right
|
|
* @param text the message text
|
|
*/
|
|
function appendMessage(name, img, side, text) {
|
|
const msgHTML = `
|
|
<div class="msg ${side}-msg">
|
|
<div class="msg-img" style="background-image: url(${img})"></div>
|
|
|
|
<div class="msg-bubble">
|
|
<div class="msg-info">
|
|
<div class="msg-info-name">${name}</div>
|
|
<div class="msg-info-time">${formatDate(new Date())}</div>
|
|
</div>
|
|
|
|
<div class="msg-text">${text}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
msgerChat.insertAdjacentHTML("beforeend", msgHTML);
|
|
msgerChat.scrollTop += 500;
|
|
}
|
|
|
|
/**
|
|
* DOM-Elemente selektieren
|
|
*
|
|
* @param selector der Selektor (z.B. Klasse oder ID)
|
|
* @param root das Root-Element von dem ausgegangen wird
|
|
* @returns das DOM-Element
|
|
*/
|
|
function get(selector, root = document) {
|
|
return root.querySelector(selector);
|
|
}
|
|
|
|
/**
|
|
* Formatiert einen Datumswert zum Uhrzeit-Format HH:mm
|
|
*
|
|
* @param {*} date das Datum
|
|
* @returns die formatierte Uhrzeit
|
|
*/
|
|
function formatDate(date) {
|
|
const h = "0" + date.getHours();
|
|
const m = "0" + date.getMinutes();
|
|
return `${h.slice(-2)}:${m.slice(-2)}`;
|
|
}
|
|
|
|
/**
|
|
* Gibt eine zufällige ganze Zahl zwischen min und max zurück
|
|
*
|
|
* @param {*} min die Untergrenze
|
|
* @param {*} max die Obergrenze
|
|
* @returns die Zufallszahl
|
|
*/
|
|
function random(min, max) {
|
|
return Math.floor(Math.random() * (max - min) + min);
|
|
}
|