直播间聊天室

<!DOCTYPE html>  
<html>  
<head>  <meta charset="UTF-8">  <title>聊天界面</title>  <style>  /**重置标签默认样式*/   * {   margin: 0;   padding: 0;   list-style: none;   font-family: '微软雅黑'   }   #container {   width: 450px;   height: 780px;   background: #eee;   margin: 80px auto 0;   position: relative;   box-shadow: 20px 20px 55px #777;   }   .header {   background: #000;   height: 40px;   color: #fff;   line-height: 34px;   font-size: 20px;   padding: 0 10px;   }   .footer {   width: 430px;   height: 50px;   background: #666;   position: absolute;   bottom: 0;   padding: 10px;   }   .footer input {   width: 275px;   height: 45px;   outline: none;   font-size: 20px;   text-indent: 10px;   position: absolute;   border-radius: 6px;   right: 80px;   }   .footer span {   display: inline-block;   width: 62px;   height: 48px;   background: #ccc;   font-weight: 900;   line-height: 45px;   cursor: pointer;   text-align: center;   position: absolute;   right: 10px;   border-radius: 6px;   }   .footer span:hover {   color: #fff;   background: #999;   }   #user_face_icon {   display: inline-block;   background: red;   width: 60px;   height: 60px;   border-radius: 30px;   position: absolute;   bottom: 6px;   left: 14px;   cursor: pointer;   overflow: hidden;   }   img {   width: 60px;   height: 60px;   }   .content {   font-size: 20px;   width: 435px;   height: 662px;   overflow: auto;   padding: 5px;   }   .content li {   margin-top: 10px;   padding-left: 10px;   width: 412px;   display: block;   clear: both;   overflow: hidden;   }   .content li img {   float: left;   }   .content li span{   background: #7cfc00;   padding: 10px;   border-radius: 10px;   float: left;   margin: 6px 10px 0 10px;   max-width: 310px;   border: 1px solid #ccc;   box-shadow: 0 0 3px #ccc;   }   .content li img.imgleft {    float: left;    }   .content li img.imgright {    float: right;    }   .content li span.spanleft {    float: left;   background: #fff;   }   .content li span.spanright {    float: right;   background: #7cfc00;   }   </style>  
</head>  
<body>  <div id="container">  <div class="header">  <span style="float: left;" id="toname"></span>  <span style="float: right;" id="online"></span>  </div>  <ul class="content">  </ul>  <div class="footer">  <div id="user_face_icon">  <img src="" id="avatar">  </div>  <input id="text" type="text" placeholder="说点什么吧...">  <!--<input type="button" value="发送" class="talk_sub" id="talksub">--><span id="btn">发送</span>  </div>  </div>  <script src="__STATIC__/js/jquery.js"></script><script type="text/javascript">     var user_login = "{$user_login}";var room_id = {$room_id};var icon = document.getElementById('user_face_icon').getElementsByTagName('img');var btn = document.getElementById('btn');   var text = document.getElementById('text');   var content = document.getElementsByTagName('ul')[0];   var img = content.getElementsByTagName('img');   var span = content.getElementsByTagName('span');   var ws = new WebSocket("ws://"+document.domain+":8282");// 当有消息时根据消息类型显示不同信息ws.onmessage = onmessage;// 服务端发来消息时var Words = document.getElementById("words");function onmessage(e){var data = JSON.parse(e.data);console.log(data)switch(data['type']){// 绑定idcase 'init':var bind = '{"type":"bind","user_login":"'+user_login+'","room_id":'+room_id+'}';ws.send(bind);return;// 接收消息case 'text':if(user_login != data['user_login']){content.innerHTML += '<li><span class="spanleftspanleft">'+data['content']+'</span></li>';}return;}}$("#btn").click(function(){var TalkWords = $("#text").val();if(TalkWords == ""){// 消息为空时弹窗alert("消息不能为空");return;}content.innerHTML += '<li><span class="spanleft">'+TalkWords+'</span></li>';var message = '{"type":"say","message_type":"1","content":"'+TalkWords+'","user_login":"'+user_login+'","room_id":"'+room_id+'"}';// 存入数据ws.send(message);$("#text").val("");// 内容过多时,将滚动条放置到最底端   content.scrollTop=content.scrollHeight; })</script>
</body>  
</html>

直播间聊天室

相关文章

一对一视频直播APP开发要点

娱乐直播成“过去式”，花房集团的IPO还会“香”吗？

主席团坐客直播间，GopherChina 2023 一手资讯全掌握

响铃：主打素人直播，这会是石榴直播（六间房）的解药还是春药？

内网直播（局域网直播）系统的搭建

直播：GopherChina 2023 云原生专场

批量检测六间房直播状态

花房集团赴港IPO：直播与社交双引擎驱动，构筑元宇宙生态迈入“以用户为核心”向阳路