ChatApp v1

ChatApp v1.markdown

ChatApp v1

Jednostavna Chat applikacija.

A Pen by KemalC. on CodePen.

License.

index.html

<canvas id='alpha_overlay'></canvas>
<div id='main_wrapper'>
  <div id='popup_note'>
    <div>
      <p>Aplikacija podrzava samo novije browsere - Chrome, Firefox. Opera i Safari mogu raditi, ali IE NE! </p>
      <input id='closePopup' value='zatvori' type='button'></input>
    </div>
  </div>
  <input id='username_input' placeholder='unesi username' type='text'></input>
  <input id='chat_start_button' value='pokreni chat' type='button'></input>
  
  <div id='chat_area'>
    <div id='chat_output'></div>
    <input type='text' id='chat_input'></input>
    <input value='posalji chat' type='button' id='send'></input>
  </div>
</div>

script.js

var sanitize = function (html, settings) {
  
  settings = settings || {};
  var sanitized = '';
  function advance (n) {
    if (typeof n === 'string') {
      sanitized += n;
      n = n.length;
    }
    html = html.slice(n);
  }
  var match;
  while (html.length) {
    if (match = html.match(/^[^<]+/)) { // cdata
      sanitized += match[0].replace(/>/g, '&gt;')
      advance(match[0].length);
      continue;
    }
    var endPos = html.indexOf('>');
    if (endPos === -1) {
      // discard tag
      advance(html.length);
      continue;
    }
    var tag = html.slice(0, endPos+1);
    if (match = tag.match(/^<\/([a-zA-Z]+)>$/)) { // end tag
      var tagName = match[1];
      advance(settings[tagName] ? match[0] : match[0].length);
      continue;
    }
    if (match = tag.match(/^<([a-zA-Z]+)(?:\s+(.+))?\s*\/?>$/)) {
      var tagName = match[1].toLowerCase()
      ,   attrs   = match[2];
      if (settings[tagName]) {
        var attributes = {};
        while (attrs) { // read attributes
          var key = attrs.match(/^[a-zA-Z]+/);
          if (!key) break;
          key = key[0];
          attrs = attrs.slice(key.length);
          if (attrs[0] === '=') {
            attrs = attrs.slice(1);
            if (/['"]/.exec(attrs[0])) {
              var quote = attrs[0];
              var closingPos = attrs.indexOf(quote, 1);
              if (closingPos === -1) break;
              attributes[key] = attrs.slice(1, closingPos);
              attrs = attrs.slice(closingPos+1);
            } else if (!attrs[0].exec(/\s/)) {
              var value = attrs.match(/^[^\s]+/);
              if (!value) break;
              value = value[0];
              attrs = attrs.slice(value.length);
              attributes[key] = value;
            } else {
              break;
            }
          } else if (attrs[0].exec(/\s/)) {
            attributes[key] = key;
          } else {
            break;
          }
          var ws = attrs.match(/^\s+/);
          if (!ws) break;
          attrs = attrs.slice(ws[0].length);
        }
        sanitized += '<'+tagName;
        // validate and write attributes
        for (var key in attributes) {
          var validator;
          if (attributes.hasOwnProperty(key) && (validator = settings[tagName][key])) {
            var value = attributes[key].replace(/"/g, '&quot;');
            if (typeof validator === 'function' && !validator(value)) continue;
            sanitized += ' '+key+'="'+value+'"';
          }
        }
        sanitized += '>';
      }
    }
    advance(tag.length);
  }
  return sanitized;
}

var c = document.getElementById("alpha_overlay");
var ctx = c.getContext("2d");
ctx.fillStyle = "rgba(0, 0, 0, 0.8)";
ctx.fillRect(0, 0, 1920, 1080);

username = '';

hasJoinedChat = false;

channel = new DataChannel('Main');

$('#closePopup').on('click', function(){
  $('#alpha_overlay').fadeOut();
  $('#popup_note').fadeOut();
})

channel.onopen = function(userid) {
  console.log('onOpen');
}

channel.onleave = function(userid){
  none = 'nope';
}

channel.onmessage = function(message, userid) {
  username_sender = message.username;
  text = message.text;
  
  console.log('onMessage', 'user: ', userid, '\nmessage: ', text);
  output = '<div id="message_wrapper"><span id="user_other">' + username_sender +  '</span><p id="message">: ' + text + '</p></div><br>';
  $('#chat_output').append(output);
}

$('#chat_start_button').click(function(){
  //Changes the username to whatever the user put in the textfield
  username = $('#username_input').val();
  channel.userid = username;
  //enables chatting
  hasJoinedChat = true;
  //disable the join chat button
  $('#main_wrapper').append('<p id="chatJoined">Succesfully joined chat</p>');
  $('#username_input').slideUp();
  //Show a short message after joining
  $('#chat_start_button').slideUp();
  setTimeout(function() {
        $("#chatJoined").fadeOut();
    }, 2500);
});

$('#send').click(function(){
  text = sanitize($('#chat_input').val());
  if(text.length != 0){
    if(hasJoinedChat){
      //Constructs a message inside the #chat_output div
      output = '<div id="message_wrapper"><span id="user_self">' + username +  '</span><p id="message">: ' + text + '</p></div><br>';
      $('#chat_output').append(output);
      //empties the message input box
      $('#chat_input').val('');
      //Sends the message over to other people
      dataToSend = {
        username: username,
        text: text
      }
      channel.send(dataToSend);
    }else{
      alert('You must join the chat first!') 
    }
  }else{
  
  }
});

scripts

<script src="https://webrtc-experiment.appspot.com/DataChannel.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

*{
  padding: 0;
  margin: 0;
}

#main_wrapper *{
  padding: 1px;
  margin: 1px;
}

#alpha_overlay{
  padding: 0;
  margin: 0;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}

#main_wrapper{
  width: 300px;
  margin: 0 auto;
}

#popup_note{
  top: 100px;
  z-index: 2;
  padding: 6px;
  position: absolute;
  width: 300px;
  height: 150px;
  margin: 0 auto;
  background-color: white;
  border: 2px solid black;
  border-radius: 18px;
}

#popup-note div{
  width: 250px;
  margin: 0 auto;
}

#popup-note closePopup{
  margin: 0 auto;
}

#chat_area{
  height: 300px;
}

#chat{
  width: 80%;
  height: 90%;
}

#chat_output{
  border: 1px solid black;
  height: 90%;
  overflow: auto;
}

#chat_output:nth-child(even){
  background-color: gray;
}

#chat_input{
  padding: 0;
  margin: 0;
}

#username_input{
  padding-left: 3px;
}

#user_self, #message, #user_other {
  padding: 0;
  margin: 0;
}

#user_self, #user_other{
  text-decoration: underline;
}

#user_self{
  color: red;
}

#user_other{
  color: green;
}

#message, #message_wrapper{
  display: inline;
}