131 lines
4.3 KiB
JavaScript
131 lines
4.3 KiB
JavaScript
// PS! Replace this with your own channel ID
|
|
// If you use this channel ID your app will stop working in the future
|
|
const CLIENT_ID = '6dxCgq4lS14ImHm5';
|
|
|
|
const drone = new ScaleDrone(CLIENT_ID, {
|
|
data: { // Will be sent out as clientData via events
|
|
name: getRandomName(),
|
|
color: getRandomColor(),
|
|
},
|
|
});
|
|
|
|
let members = [];
|
|
|
|
drone.on('open', error => {
|
|
if (error) {
|
|
return console.error(error);
|
|
}
|
|
console.log('Successfully connected to Scaledrone');
|
|
|
|
const room = drone.subscribe('observable-room');
|
|
room.on('open', error => {
|
|
if (error) {
|
|
return console.error(error);
|
|
}
|
|
console.log('Successfully joined room');
|
|
});
|
|
|
|
room.on('members', m => {
|
|
members = m;
|
|
updateMembersDOM();
|
|
});
|
|
|
|
room.on('member_join', member => {
|
|
members.push(member);
|
|
updateMembersDOM();
|
|
});
|
|
|
|
room.on('member_leave', ({id}) => {
|
|
const index = members.findIndex(member => member.id === id);
|
|
members.splice(index, 1);
|
|
updateMembersDOM();
|
|
});
|
|
|
|
room.on('data', (text, member) => {
|
|
if (member) {
|
|
addMessageToListDOM(text, member);
|
|
} else {
|
|
// Message is from server
|
|
}
|
|
});
|
|
});
|
|
|
|
drone.on('close', event => {
|
|
console.log('Connection was closed', event);
|
|
});
|
|
|
|
drone.on('error', error => {
|
|
console.error(error);
|
|
});
|
|
|
|
function getRandomName() {
|
|
const adjs = ["clean", "sussy", "autumn", "hidden", "bitter", "misty", "silent", "empty", "dry", "dark", "summer", "icy", "delicate", "quiet", "white", "cool", "spring", "winter", "patient", "twilight", "dawn", "crimson", "wispy", "weathered", "blue", "billowing", "broken", "cold", "damp", "falling", "frosty", "green", "long", "late", "lingering", "bold", "little", "morning", "muddy", "old", "red", "rough", "still", "small", "sparkling", "shy", "wandering", "withered", "wild", "black", "young", "holy", "solitary", "fragrant", "aged", "snowy", "proud", "floral", "restless", "divine", "polished", "ancient", "purple", "lively", "nameless"];
|
|
const nouns = ["sweep", "baka", "amogus", "waterfall", "river", "breeze", "moon", "rain", "wind", "sea", "morning", "snow", "lake", "sunset", "pine", "shadow", "leaf", "dawn", "glitter", "forest", "hill", "cloud", "meadow", "sun", "glade", "bird", "brook", "butterfly", "bush", "dew", "dust", "field", "fire", "flower", "firefly", "feather", "grass", "haze", "mountain", "night", "pond", "darkness", "snowflake", "silence", "sound", "sky", "shape", "surf", "thunder", "violet", "water", "wildflower", "wave", "water", "resonance", "sun", "wood", "dream", "cherry", "tree", "fog", "frost", "voice", "paper", "frog", "smoke", "star"];
|
|
return (
|
|
adjs[Math.floor(Math.random() * adjs.length)] +
|
|
"_" +
|
|
nouns[Math.floor(Math.random() * nouns.length)]
|
|
);
|
|
}
|
|
|
|
function getRandomColor() {
|
|
return '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16);
|
|
}
|
|
|
|
//------------- DOM STUFF
|
|
|
|
const DOM = {
|
|
membersCount: document.querySelector('.members-count'),
|
|
membersList: document.querySelector('.members-list'),
|
|
messages: document.querySelector('.messages'),
|
|
input: document.querySelector('.message-form__input'),
|
|
form: document.querySelector('.message-form'),
|
|
};
|
|
|
|
DOM.form.addEventListener('submit', sendMessage);
|
|
|
|
function sendMessage() {
|
|
const value = DOM.input.value;
|
|
if (value === '') {
|
|
return;
|
|
}
|
|
DOM.input.value = '';
|
|
drone.publish({
|
|
room: 'observable-room',
|
|
message: value,
|
|
});
|
|
}
|
|
|
|
function createMemberElement(member) {
|
|
const { name, color } = member.clientData;
|
|
const el = document.createElement('div');
|
|
el.appendChild(document.createTextNode(name));
|
|
el.className = 'member';
|
|
el.style.color = color;
|
|
return el;
|
|
}
|
|
|
|
function updateMembersDOM() {
|
|
DOM.membersCount.innerText = `${members.length} users in room:`;
|
|
DOM.membersList.innerHTML = '';
|
|
members.forEach(member =>
|
|
DOM.membersList.appendChild(createMemberElement(member))
|
|
);
|
|
}
|
|
|
|
function createMessageElement(text, member) {
|
|
const el = document.createElement('div');
|
|
el.appendChild(createMemberElement(member));
|
|
el.appendChild(document.createTextNode(text));
|
|
el.className = 'message';
|
|
return el;
|
|
}
|
|
|
|
function addMessageToListDOM(text, member) {
|
|
const el = DOM.messages;
|
|
const wasTop = el.scrollTop === el.scrollHeight - el.clientHeight;
|
|
el.appendChild(createMessageElement(text, member));
|
|
if (wasTop) {
|
|
el.scrollTop = el.scrollHeight - el.clientHeight;
|
|
}
|
|
} |