简单的js+paas平台聊天室

wocacaca
wocacaca 发布于 2016-01-06 11:23:18 浏览:1319 类型:原创 - 随笔 分类:JavaScript - 小demo 二维码: 作者原创 版权保护
w3cfuns 改版啦,看起来棒棒的,前几天闲着无聊,就玩了下paas平台,发现了一个即时聊天的小插件,然后略微修改了一下,做成一个简易的聊天室,戳我试玩,

这个具体原理就是平台会监控数据库里更新状况,如果有更新就返回回来一条数据...好吧,我是闲的蛋疼,哈哈

差点找不到在哪插入代码了...
源码如下
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>chat room demo</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="http://7u2sas.com1.z0.glb.clouddn.com/js/jquery.1.8.3.min.js"></script>
    <script src="js/bmobSocketIo.js"></script>
    <script src="js/bmob.js"></script>
    <script type="text/javascript" src="js/jquery.qqFace.js"></script>
</head>
<body>
    <h1>chat room demo</h1>
    <div class="msg-box clearfix">
      <span>欢迎你,<span class="col-red" id="current"></span></span>
      <a href="javascript:;" id="reg" class="fr">注销</a>
    </div>
    <div id="data" class="clearfix chat"></div>
    <div class="btn-box">
        <textarea class="content" id="content" name="content"></textarea>
        <span class="emotion">表情</span>
        <a href="javascript:;" class="send-btn" id="send">发送</a>
    </div>  
    <div class="login-box">
      <h3>请输入本次昵称:(不超过5个字)</h3>
      <ul>
        <li><input type="text" class="name" id="name"></li>
        <li><a href="javascript:;" class="sure" id="sure">确定</a></li>
      </ul>
    </div>
    <div class="full-bg">
    </div>
  <script type="text/javascript">
    $(document).ready(function(){
      if(localStorage.name){
        $(".login-box,.full-bg").css("display","none");
      }
      $("#sure").on("click",function(){
        localStorage.name = $("#name").val()
        $(".login-box,.full-bg").css("display","none");
        $("#current").text(localStorage.name);
      })
      $("#current").text(localStorage.name);
      $("#reg").on("click",function(){
        $(".login-box,.full-bg").css("display","block");
      })
      $('.emotion').qqFace({
        id : 'facebox', //表情盒子的ID
        assign:'content', //给那个控件赋值
        path:'face/'  //表情存放的路径
      });
    })
    function sendMsg(){
        var name= localStorage.name;
        var content = $("#content").val();
         if($.trim(content)==""){
            alert("内容不能为空!");
            return;
        }       
        var Chat = Bmob.Object.extend("Chat");
        var chat = new Chat();
        chat.set("name", localStorage.name);
        chat.set("content", $("#content").val());
        chat.save(null, {
          success: function(object) {           
          },
          error: function(model, error) {            
          }
        });    
        $("#content").val(""); 
    }
    $("#send").click(function(){
        sendMsg();
    });
    function replace_em(str){
      str = str.replace(/\</g,'&lt;');
      str = str.replace(/\>/g,'&gt;');
      str = str.replace(/\n/g,'<br/>');
      str = str.replace(/\[em_([0-9]*)\]/g,'<img src="face/$1.gif" border="0" />');
      return str;
    }
    //服务器
    BmobSocketIo.initialize("b5858b7b2f1704c0db5d549a2cf48e14");
    Bmob.initialize("b5858b7b2f1704c0db5d549a2cf48e14", "7666c915d7c46a928d547a7898507c4e");
   //初始连接socket.io服务器后,需要监听的事件都写在这个函数内
    BmobSocketIo.onInitListen = function() {
      //订阅GameScore表的数据更新事件
      BmobSocketIo.updateTable("Chat");     
    };
      //监听服务器返回的更新表的数据
   BmobSocketIo.onUpdateTable = function(tablename,data) {    
     if( tablename=="Chat" ) {
        // alert(tablename);
        var content=$("#data");
        if(data.name == localStorage.name){
          var p = '<p class="chat-box-r"><span style="color:red;">' + data.name+'</span>  '+'<span style="color:green;">'+ data.createdAt+'</span>  '+ ' :<br/> '+replace_em(data.content)+'</p><br/><br/>';
        }else{
          var p = '<p class="chat-box-l"><span style="color:red;">' + data.name+'</span>  '+'<span style="color:green;">'+ data.createdAt+'</span>  '+ ' :<br/> '+replace_em(data.content)+'</p><br/><br/>';
        }
        content.html(content.html()+p);
        var top = $("#data")[0].scrollHeight
        $("#data").scrollTop(top);
     }
   };
  //通过“回车”提交聊天信息
   $('#content').keydown(function(e) {
    if (e.keyCode === 13) {
      e.preventDefault();
      sendMsg();
    }
  });
  </script>


</body>
</html>
z
给个赞 1 人点赞
收藏 0 人收藏
评论 已有 2 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
wocacaca
wocacaca2016-06-09 20:41:112F
github //@fanzhiri:我想问下,你这个网页是部署在哪里?
举报 支持 (0) 回复 (0)
fanzhiri
fanzhiri2016-05-13 06:50:521F
我想问下,你这个网页是部署在哪里?
举报 支持 (0) 回复 (1)
wocacaca wocacaca 作者

快闪开,我要帅炸了!

作者最新