socketIo
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="shortcut icon" href="#" />
  <title>GETH</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="css/imageAuthor.css">
  <link rel="stylesheet" type="text/css" href="css/normalize.css" />
  <link rel="stylesheet" type="text/css" href="css/default.css">
  <link href="css/example.css" rel="stylesheet">
  <script type="text/javascript" language="javascript" src="js/jquery.js"></script>
  <script type="text/javascript" language="javascript" src="js/json2.js"></script>
  <script type="text/javascript" language="javascript" src="js/socket-web.js"></script>
  <style></style>
</head>
<body style="background: url('img/加载游戏背景.png') no-repeat fixed;"><div id="shield"
  style="display:none;position:absolute;left:0px;top:0px;width:100%;height:100%;background:rgb(51, 51, 51);opacity:0.3;text-align:center;z-index:1;">
</div>
  <div id="dragRoom"onmousedown="this.dragBox(event,'shield'.Id())"onmousemove=this.dashedBox(event)  class="dragRoom" style="width:1200px;height: 660px;z-index: 3;">
    <header onload="this.p().setCenter()" onmousedown="this.moveBox(event,true,'shield'.Id())">代码整洁之道</header>
    <div class="btns">
      <em title="关闭"onclick="so.emit('leaveRoom','room'.Id().innerHTML)">✖</em>
      <em title="最大化"onclick=this.innerHTML==="☐"?(this.innerHTML="❐",this.title="还原"):(this.innerHTML="☐",this.title="最大化")>☐</em>
      <em title="最小化"onclick="">━</em>
    </div>
    <div class="dragRoomHead">
      <div style="width:160px;float: left;">
        <div
          style="height: 160px;margin-top: 3px;background: url('img/头像底框.png') no-repeat;background-size: cover;border-bottom: #ccc 1px solid;">
          <img src="img/主题文字.png" width=100%;>
        </div>
        <div style="height: 465px;width:158px;background: lavender;box-shadow:1px 1px 1px 2px #5D7">
          <ul id="roomTable"></ul>
        </div>
      </div>
      <div style="width:100%;float: left;padding-left:5px;width: 86%;height: 100%;">
        <article class="zzsc-container">
          <div id="container"></div>
          <div id="topbar"></div>
        </article>
      </div>
    </div>
  </div>
  <div style="float: left;height:425px;display:flex;">
    <div>
      <p>url:<code id="url">...</code> 房间名: <code id="room"></code></p>
      <p>Ip:<label id="IPv4">0.0.0.0</label><button onclick="'viewlist'.Id().innerHTML='';">✖清空记录</button> 在线人数：<label
          id="onlinePerson">0</label></p>
      <div class="viewlist" id="viewlist" style="cursor:no-drop;">
      </div>
      <div class="chuangkou"><input type="button" name="btn" value="提交" />
        <!-- 配置后端接口选项 -->
        <select name="xuan" id="xuan">
          <option value="message">message</option>
          <option value="create or join">create or join</option>
          <option value="leaveRoom">leaveRoom</option>
          <option value="getRooms">getRooms</option>
          <option value="userCome">userCome</option>
        </select>
        <select name="condition" id="condition">
          <option value="all">all</option>
          <option value="del">del</option>
          <option value="other">other</option>
        </select>
        <div contenteditable="true" name="text" id="menulist" class="menulist">
        </div>
        <div id="PicTure" style="display:none;">
          <a href="javascript:;" class="input_style_file_upload" title="拖拽图片上传">
            <input onchange="getNextElement(this).src=(window.URL||window.webkitURL).createObjectURL(this.files[0])"
              type="file" name="fileName">
            <img onclick="getPreElement(this).click()" name="preview" height="100%" width="100%" />
          </a>
        </div>
      </div>
    </div>
    <div>
      <p>房间列表:<button
          onclick="if ('room'.Id().innerHTML === '') so.emit('create or join',generateId());else alert('你已经在房间了！')">+创建</button>[双击进入]
        <!--<button onclick="so.emit('getRooms')">↻刷新</button>-->
      </p>
      <ul class="viewlist" style="background-color: darkgrey;" id="roomList">
      </ul>
      <p>房间信息: <button onclick="so.emit('leaveRoom','room'.Id().innerHTML)">离开房间</button></p>
      <ul class="viewlist" style="background-color: darkkhaki;height: 150px;" id="roomTable">
      </ul>
    </div>
    <div>
      <p>主网用户: <button onclick="'usersList'.Id().innerHTML='';so.emit('getUsers')">↻刷新</button></p>
      <ul class="viewlist" style="background-color:gainsboro;height: 500px;" id="usersList">
      </ul>
    </div>
  </div>
</body>
<script>var so = io.connect("ws:"+ window.location.origin.replace(/http:/, ''));var $ready=false, timer;
  var $oText = $("div[name='text']"), $data = { d: "all" }, $bool = false, onlinePerson = 'onlinePerson'.Id();
  //发送消息的按钮，传送给服务器的某个房间
  $("input[type='button'][name='btn']").on('click', function () {
    if ("condition".Id().value === "del") 'room'.Id().innerHTML = ""
    $data.v = "url".Id().innerHTML.substr(0, 5) + ":= " + $oText.html(); $data.d = 'condition'.Id().value;
    if ('room'.Id().innerHTML) $data.r = "room".Id().innerHTML
    switch ('xuan'.Id().value) {
      case "message": so.send($data); break;
      case "create or join": so.emit("create or join", $oText.html().substr(0, 10)); break;
      case "leaveRoom": so.emit("leaveRoom", 'room'.Id().innerHTML); break;
      default: so.emit(String('xuan'.Id().value));
    }

    if (!$oText.html()) return;
    $oText.html("");
  })
  //连入主网时候，主网会分配一个url作为客户端的id
  so.on("login", function (v) {
    'url'.Id().innerHTML = v; $data.id = v; so.emit("IPv4");
    so.emit("getUsers", true);//加入true表示通知其他玩家，不加入是刷新用户列表按钮
  })
  so.on("getUsers", function (v, num) { listParse('usersList', v); onlinePerson.innerHTML = num;
    if (timer) clearTimeout(timer);
    timer = setTimeout(function () {
      if ('usersList'.Id().childNodes.length !== num) { 'usersList'.Id().innerHTML = ''; so.emit('getUsers') }
    }, 2500)
  })
  //接收其他玩家进入主网的信息
  so.on("userCome", function (v, num) { onlinePerson.innerHTML = num; objParse('usersList', v); })
  so.on("message", function (mes) {
    console.log(mes.v)
    objParse('viewlist', mes.v)
  });
  //加入房间
  so.on("joined", function (id, room) {
    'room'.Id().innerHTML = room;
    'dragRoom'.Id().style.display = 'block'; 'dragRoom'.Id().childNodes[1].innerHTML = room;
    objParse('roomTable', id, { a: true }); 'dragRoom'.Id().setCenter();
    'roomTable'.Id().firstChild.style.color = "red"//房主需要设置红色
  })
  so.on("getRooms", function (v) {
    listParse('roomList', v, { b: true })
  })
  so.on("getRoomPlayers", function (v) {
    'roomTable'.Id().innerHTML = "";
    listParse('roomTable', v, { a: true });
  })
  so.on("playerCome", function (v) {
    objParse('roomTable', v, { a: true });
  })
  so.on("ready", function () {
    console.log("所有人都就位了。"); $ready=true;
    deck.mount($container)
  })
  so.on("leaveRoom", function (v, id) {
      $start.innerHTML = "开始"; $start.style.color = "#eee";
      $start.disabled = false; deck.sort(true); $ready=false;
    if ("url".Id().innerHTML === id) {
      'dragRoom'.Id().style.display = "none";
      "room".Id().innerHTML = "roomTable".Id().innerHTML = "";
    } else {
      objParse('viewlist', id + "离开了:" + v); delOne("roomTable".Id().childNodes, id);
      if ('roomTable'.Id().firstChild.style.color !== "red") 'roomTable'.Id().firstChild.style.color = "red";
    }
  })
  //创建房间
  so.on("created", function (v) {
    objParse('roomList', v, { b: true });
  })
  so.on("destroyRoom", function (v) {
    delOne("roomList".Id().childNodes, v)
  })
  so.on("full", function () { alert("房间已满"); })
  so.on("log", function (da) { console.log("log" + da); })
  //成功连接的时候可以执行的操作
  so.on("connect", function () {

    so.emit("getRooms"); 'dragRoom'.Id().style.display = 'none';
  })
  so.on("IPv4", function (v) {
    'IPv4'.Id().innerHTML = v; if (onlinePerson.innerHTML != 'usersList'.Id().childNodes.length) { 'usersList'.Id().innerHTML = ''; so.emit('getUsers') }
  })
  so.on("disconnect", function () {
    'dragRoom'.Id().style.display = 'none';
    'room'.Id().innerHTML = 'roomList'.Id().innerHTML = 'roomTable'.Id().innerHTML = 'usersList'.Id().innerHTML = onlinePerson.innerHTML = ""
  })
  so.on("exit", function (v, b) {
    onlinePerson.innerHTML = --onlinePerson.innerHTML;
    delOne("usersList".Id().childNodes, v);
    if (b) so.emit('getRooms');//如果有人退出的房间一个人都没有，会重新获取一次房间
  })
  window.onresize = function () {
    'dragRoom'.Id().setCenter();
  }
</script>
<script type="text/javascript" language="javascript" src="js/api.js"></script>
<script src="js/deck.js"></script>
<script src="js/example.js"></script>

</html>