Չատ Html Css Javascript

<link rel="stylesheet" type="text/css" href="http://cdn.foundation5.zurb.com/foundation.css"/>


<ul id="video_list" class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
    <li>
      <video id="localVideo" autoplay></video>
      <p id="myId"></p>
      <input id="newId" class="hide" type="text" placeholder="digite seu novo ID" >     
      <a onclick="changeId()" class="button tiny round">Mudar ID</a>
    </li>
  </ul>
<hr/>
<div id="chatbox" class="row"></div>
<hr/>
<output id="list"></output>

<form action="" onsubmit="plotMsg();return false;">
  <div class="row">
    <div class="large-12 columns">
      <div class="row collapse">
        <div class="small-10 columns">
          <input id="msg" type="text" placeholder="Digite sua mensagem">
        </div>
        <div class="small-2 columns">
          <a onclick="plotMsg()" class="button postfix">Enviar</a>
        </div>
      </div>
    </div>
  </div>
</form>

<script type="text/javascript" src="http://cdn.icecomm.io/icecomm.js"></script>
<script type="text/javascript" src="http://cdn.foundation5.zurb.com/foundation.js"></script>

ՙ՚ՙ՚

<style>
video
  //height 300px
  width 300px
  border 1px solid #BBB
  margin 5px
  
#chatbox
    text-align left
    margin 0 auto
    margin-bottom 25px
    padding 10px
    background #fff
    height 200px
    //border 1px solid #BBB
    overflow auto
li
  text-align center
</style>







<script type="text/javascript">var me;
var comm = new Icecomm('v0p1qR/u5xEgaTsEvipakOjDZLQkKHraRgCQJXKpO5cpJnu');


comm.connect('testroom', {audio: false});

comm.on('connected', function(options) {
  me = comm.getLocalID();
  var ul = document.getElementById("video_list");
  var li = document.createElement("li");
  var p = document.createElement("P");
  var a = document.createElement("a");

  document.getElementById("myId").innerHTML = me;
  var id = options.callerID;
  var name = document.createTextNode(id);
  p.setAttribute('id', 'p'+id);
  p.appendChild(name);


  /*a.onclick = function(){changeId();};
  a.className = "button tiny round";
  a.innerHTML = "MudarID";*/

  li.appendChild(options.video);
  li.appendChild(p);
  //li.appendChild(a);

  ul.appendChild(li);
  addMsg(id + " entrou!");
  /*console.log("COMM: " + comm.getLocalID());
  console.log("OPTMy: " + options.myID);
  console.log("OPTCaller: " + options.callerID);*/
  /*remoteVideo.src = options.stream;
  remoteVideo.id = options.callerID;*/
});

comm.on('local', function(options) {
  localVideo.src = options.stream;
});

comm.on('disconnect', function(options) {
  document.getElementById(options.callerID).parentNode.remove();
});
comm.on('data', function(options) {
  console.log(options.data);
  //if (typeof(options.data) == 'string'){
  document.getElementById("p"+options.callerID).innerHTML = options.data['name'];
  addMsg(options.data['text']);
  
  //}

});

this.plotMsg = function(){
  var msg = document.getElementById('msg').value
  var text = me+': '+msg;
  comm.send({'name':me, 'text':text});
  addMsg(text);
  document.getElementById('msg').value = "";
}
this.addMsg = function(message){
  var p = document.createElement("P");
  var t = document.createTextNode(message);
  p.appendChild(t);
  var chat = document.getElementById("chatbox");
  chat.appendChild(p);
  chat.scrollTop = chat.scrollHeight;
}

this.changeId = function(){
  var text = me+'mudou de ID para: ';
  me = document.getElementById("newId").value;
  addMsg("Você mudou de ID para: "+me);
  document.getElementById("newId").value= "";
  document.getElementById("myId").innerHTML = me;
  text +=me+'.';
  comm.send({'name':me, 'text':text})

}


/////////////////////////////// js para o drop de files

function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    var files = evt.dataTransfer.files; // FileList object.

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate.toLocaleDateString(), '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  function handleDragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
  }

  // Setup the dnd listeners.
  var dropZone = document.getElementById('chatbox');
  dropZone.addEventListener('dragover', handleDragOver, false);
  dropZone.addEventListener('drop', handleFileSelect, false);
</script>

SHARE