Chatroom tutorial part 1

Sending and receiving messages with JavaScript

In this tutorial you are going to build a client side chatroom. Users will be able to send messages and display incoming messages in a chat window.

Check out the live editable example on JS Bin.

Setup

Lets start with the basic layout for the chatroom that includes some HTML and CSS.

index.html

script.js

style.css

<!doctype html>

<html>
  <head>
    <title>Chatroom</title>
    <link rel="stylesheet" href="style.css">
    <script type='text/javascript' src='https://cdn.scaledrone.com/scaledrone.min.js'></script>
    <script type='text/javascript' src="script.js"></script>
  </head>
  <body>
    <div class="text-area"></div>
    <form class="input-area" onsubmit="onSubmitForm(); return false;">
      <input type="text" class="input name" placeholder="Name..">
      <input type="text" class="input content" placeholder="Message..">
      <input type="submit" class="input button" value="Send">
    </form>
  </body>
</html>

function onSubmitForm() {
  // This gets called as form is submitted
}

body, input {
  font-size: 17px;
}

.message {
  margin: 15px 0;
}

.input-area {
  display: flex;
}

.input {
  width: 100%;
  line-height: 40px;
  border: 2px solid #C3C3C3;
  border-radius: 8px;
  padding: 0 15px;
}

.input.name {
  flex-basis: 200px;
  flex-grow: 0;
  margin-right: 5px;
}

.input.content {
  flex-grow: 1;
  margin-right: 5px;
}

.input.button {
  flex-basis: 120px;
  flex-grow: 0;
}

Connecting to Scaledrone

Next you're going to connect to Scaledrone. Start by creating a new channel in the admin panel, you're going to use the channel's ID to connect to it.

script.js

var drone = new ScaleDrone('your_channel_id');

drone.on('open', function (error) {
  if (error) return console.error(error);
  // Connected!
});

function onSubmitForm() {
  // This gets called as form is submitted
}

Subscribing to a room

Once you have received an open event you can subscribe to a room. All messages are sent inside rooms. For this tutorial you're going to need a single room called general-chat.

script.js

var drone = new ScaleDrone('your_channel_id');

drone.on('open', function (error) {
  if (error) return console.error(error);

  var room = drone.subscribe('general-chat');

  room.on('open', function (error) {
    if (error) return console.error(error);
    console.log('Connected to room');
  });
});
      
function onSubmitForm() {
  // This gets called as form is submitted
}

Listening to chat messages

Besides the open event that rooms emit you can also listen to a data event. This event will get triggered when someone publishes some data to the room. Once you receive a message from the room you will append an element to the chat area.

script.js

var drone = new ScaleDrone('your_channel_id');

drone.on('open', function (error) {
  if (error) return console.error(error);

  var room = drone.subscribe('general-chat');

  room.on('open', function (error) {
    if (error) return console.error(error);
    console.log('Connected to room');
  });
  
  room.on('data', addMessageToScreen);
});
      
function onSubmitForm() {
  // This gets called as form is submitted
}

function addMessageToScreen(message) {
  var div = document.createElement('div');
  div.innerHTML = '<b>' + message.name + '</b>: ' + message.content;
  div.classList.add('message');
  document.querySelector('.text-area').appendChild(div);
}

Sending messages to the chatroom

Now that you are listening to new messages. Let's add the send functionality! The form has two fields: name and content. You are going to send messages to the same general-chat room that you are listening to.

script.js

var drone = new ScaleDrone('your_channel_id');

drone.on('open', function (error) {
  if (error) return console.error(error);

  var room = drone.subscribe('general-chat');

  room.on('open', function (error) {
    if (error) return console.error(error);
    console.log('Connected to room');
  });
  
  room.on('data', addMessageToScreen);
});
      
function onSubmitForm(event) {
  var nameEl = document.querySelector('.input.name')
    , contentEl = document.querySelector('.input.content');

  if (nameEl.value && contentEl.value) {
    sendMessageToScaleDrone(nameEl.value, contentEl.value);
    contentEl.value = '';
  }
}
      
function sendMessageToScaleDrone(name, content) {
  drone.publish({
    room: 'general-chat',
    message: {
      name: name,
      content: content
    }
  });
}
      
function addMessageToScreen(message) {
  var div = document.createElement('div');
  div.innerHTML = '<b>' + message.name + '</b>: ' + message.content;
  div.classList.add('message');
  document.querySelector('.text-area').appendChild(div);
}