master

分支 (1)

管理

管理

master

im
/
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>IM</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <style type="text/css">
body {
  background-color: #789; margin: 0;
  padding: 0; font: 14px Helvetica, Arial, sans-serif;
}
    div.content {
      width: 800px; height:600px;margin: 2em auto; padding: 20px 50px;
      background-color: #fff; border-radius: 1em;
    }
    #messages {
      border: 2px solid #fec; border-radius: 0em;
      height: 30em; overflow: scroll; padding: 0.5em 1em;
    }
    #send_input{
      width:650px;
    }
    a:link, a:visited { color: #69c; text-decoration: none; }
    @media (max-width: 700px) {
      body { background-color: #fff; }
      div.content {
        width: auto; margin: 0 auto; border-radius: 0;
        padding: 1em;
      }
    }
    #info{
      animation:change 10s linear 0s infinite;font-size:15px;font-weight:60;
    }
    #user_name{
      animation:change 5s linear 0s infinite;font-size:12px;font-weight:50;
    }
    @keyframes change{
      0%   {color:#333;}
      25%  {color:#ff0;}
      50%  {color:#f60;}
      75%  {color:#cf0;}
      100% {color:#f00;}
    }
    </style>

  </head>
  <body>
    <div id="app">
      <div class="content">
        <h1>欢迎{{cur_user.nickname}}来到我的IM聊天系统</h1>

        <p>
        </p>

        <div id="messages">
        </div>

        <p>
        <input type="text" id="send_input"/>
        <button id="send_button"v-on:click="send_msg()"> 发送 </button>
        <button id="quit_button"v-on:click="close_chat()"> 退出 </button>
        </p>
      </div>
    </div>
  </body>

  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var new_app = new Vue({
      el: "#app",
      data:{
        cur_user: {
          nickname: null,
          id: 0
        },
        history_msg:[],
        ws:null
      },
      methods:{
        send_msg:function()
        {
          var msg_json = {
            uid:this.cur_user.id,
            nickname:this.cur_user.nickname,
            msg : document.getElementById("send_input").value,
          }
          this.ws.send(JSON.stringify(msg_json));
          document.getElementById("send_input").value="";
        },
        close_chat:function()
        {
           location.assign("/login.html");
        },
        ws_init:function(){
          this.ws = new WebSocket("ws://192.168.198.134:9000/ws");
          this.ws.onopen = this.ws_onopen;
          this.ws.onmessage = this.ws_onmessage;
          this.ws.onclose = this.ws_onclose;
        },
        ws_onopen:function(){
          var t = new Date();
          var ts = t.getHours() +":"+t.getMinutes()+":"+t.getSeconds();
          var msg = {
            uid:this.cur_user.id,
            nickname:this.cur_user.nickname,
            msg:"上线了",
          }
          this.ws.send(JSON.stringify(msg));
        },
        ws_onmessage:function(evt){
          var msg_json = JSON.parse(evt.data);
          var msg_str = msg_json.nickname + ":  "+ msg_json.msg;
          var div_html = document.createElement("div");
          div_html.innerHTML = msg_str;
          var msg_win = document.getElementById("messages");
          msg_win.appendChild(div_html);
        },
        ws_onclose:function(){
          var t = new Date();
          var ts = t.getHours() +":"+t.getMinutes()+":"+t.getSeconds();
          var msg = {
            uid:this.cur_user.id,
            msg:ts + " "+this.cur_user.nickname + "下线了",
          }
          this.ws.send(JSON.stringify(msg));

        },
        get_cur_user: function(){
          $.ajax({
            url:"/user",
            type:"get",
            context:this,
            success: function(result){
              this.cur_user = result;
              this.ws_init();
            },
            error: function(xhr,status,error){
              alert(JSON.stringify(xhr));
              alert(JSON.stringify(error));
              location.assign("/login.html");
            }
          });
        },
        get_history_msg: function(){
          $.ajax({
            url:"/message",
            type:"get",
            context:this,
            success: function(result){
              this.history_msg = result;
              for(var i in this.history_msg)
              {
                var inner_html = "";
                inner_html += this.history_msg[i].ctime;
                inner_html += " ";
                inner_html += this.history_msg[i].uid;
                inner_html += ":";
                inner_html += this.history_msg[i].msg;
                var div_html = document.createElement("div");
                div_html.innerHTML = inner_html;
                var msg_win = document.getElementById("messages");
                msg_win.appendChild(div_html);
              }
            },
            error: function(xhr,status,error){
              alert(JSON.stringify(xhr));
              alert(JSON.stringify(error));
              location.assign("login.html");
            }
          });

        }
      }
    });
new_app.get_cur_user();
new_app.get_history_msg();
  </script>
</html>