index.html



<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>《Websocket Server Of Minecraft》(WebSite Control Minecraft)</title>
<style>
body {
Overflow: Hidden; 
Background: Url("./Images/Background.png");
Background-Repeat: No-Repeat;
Background-Size: Cover;
}

.title {
background: gray;
color: red;
}

.subtitle {
background: gray;
color: red;
}

.title1 {
background: gray;
color: red;
}

.title2 {
background: gray;
color: red;
}

.Connect, .Close, .Run, .Stop {
width: 49%;
}

.Send, .Run_File {
width: 100%;
}

.Input {
text-align: center;
border-radius: 9px;
border-color: blue;
color: green;
}

    @keyframes FadeIn {
      0%    {opacity: 0}
      100%  {opacity: 1}
    }
    @-webkit-keyframes FadeIn {
      0%    {opacity: 0}
      100%  {opacity: 1}
    }
    @-moz-keyframes FadeIn {
      0%    {opacity: 0}
      100%  {opacity: 1}
    }
    @-o-keyframes FadeIn {
      0%    {opacity: 0}
      100%  {opacity: 1}
    }
    @-ms-keyframes FadeIn {
      0%    {opacity: 0}
      100%  {opacity: 1}
    }
    @keyframes FadeOut {
      0%    {opacity: 1}
      100%  {opacity: 0}
    }
    @-webkit-keyframes FadeOut {
      0%    {opacity: 1}
      100%  {opacity: 0}
    }
    @-moz-keyframes FadeOut {
      0%    {opacity: 1}
      100%  {opacity: 0}
    }
    @-o-keyframes FadeOut {
      0%    {opacity: 1}
      100%  {opacity: 0}
    }
    @-ms-keyframes FadeOut {
      0%    {opacity: 1}
      100%  {opacity: 0}
    }
    #Toast{
      color: #FFF;
      font-size: 14px;
      line-height: 1;
      padding:10px;
      border-radius: 3px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      -webkit-transform: translate(-50%,-50%);
      -moz-transform: translate(-50%,-50%);
      -o-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
      z-index: 9999;
    }
    .Hide{
      display: none;
    }
    .FadeOut{
      animation: FadeOut .5s;
    }
    .FadeIn{
      animation: FadeIn .5s;
    }
   
td {
text-align: center;
background: orange;
}

button {
border-radius: 9px;
border-color: blue;
background: yellow;
color: green;
}
</style>
</head>
<body>
<div align="center">
<table border="1">
<thead>
<tr>
<th class="subtitle">作者：lZiMUl</th>
<th class="title">
WebSite&nbspControl&nbspMinecraft
</th>
</tr>
<tr>
<td>
<input id="ConnectUrl" class="Input" placeholder="请输入WebSocket服务器地址"/>
</td>
<td>
<button id="Connect" class="Connect">连接</button>
<button id="Close" class="Close">断开</button>
</td>
</tr>
<tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr>
</thead>
<tbody>
<tr>
<th class="title1">事&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp件</th>
<th class="title2">操&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp作</th>
</tr>
<tr>
<td>模&nbsp&nbsp&nbsp&nbsp&nbsp式</td>
<td>
<button onclick='SendCommand("Official", "gamemode 0")'>生存</button>
<button onclick='SendCommand("Official", "gamemode 1")'>创造</button>
<button onclick='SendCommand("Official", "gamemode 2")'>冒险</button>
</td>
</tr>

<tr>
<td>时&nbsp&nbsp&nbsp&nbsp&nbsp间</td>
<td>
<button onclick='SendCommand("Official", "time set sunrise")'>日出</button>
<button onclick='SendCommand("Official", "time set day")'>白日</button>
<button onclick='SendCommand("Official", "time set noon")'>中午</button>
<button onclick='SendCommand("Official", "time set sunset")'>日落</button>
<button onclick='SendCommand("Official", "time set night")'>夜晚</button>
<button onclick='SendCommand("Official", "time set midnight")'>午夜</button>
</td>
</tr>

<tr>
<td>天&nbsp&nbsp&nbsp&nbsp&nbsp气</td>
<td>
<button onclick='SendCommand("Official", "weather clear")'>晴天</button>
<button onclick='SendCommand("Official", "weather rain")'>雨天</button>
<button onclick='SendCommand("Official", "weather thunder")'>雷暴</button>
</td>
</tr>

<tr>
<td>其&nbsp&nbsp&nbsp&nbsp&nbsp他</td>
<td>
<button onclick='SendCommand("Other", "设家")'>设家</button>
<button onclick='SendCommand("Other", "回家")'>回家</button>
</td>
</tr>
<tr></tr><tr></tr><tr></tr>
<tr>
<th class="title1">指&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp令</th>
<th class="title2">操&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp作</th>
</tr>
<tr>
<td><input id="Input" class="Input" placeholder="请输入指令"/></td>
<td><button class="Send" onclick='SendCommand("Official", document.getElementById("Input").value); document.getElementById("Input").value =""'>发送</button></td>
</tr>
<tr></tr><tr></tr><tr></tr>
<tr>
<th class="title1">导&nbsp&nbsp入&nbsp&nbsp指&nbsp&nbsp令&nbsp&nbsp包</th>
<th class="title2">操&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp作</th>
</tr>
<tr>
<td colspan="2">Tips：文件后缀为[JSON]格式<br>如何写文件包 请联系站长<br>我会发给你一份示例包</td>
</tr>
<tr>
<td><p>尽情期待</p></td>
<td><button id="Run_File" class="Run_File">运行文件</button></td>
</tr>
<tr></tr><tr></tr><tr></tr>
<tr>
<th class="title1">连&nbsp&nbsp&nbsp接&nbsp&nbsp&nbsp&nbsp&nbspBili&nbspBili&nbsp&nbsp&nbsp&nbsp&nbsp直&nbsp&nbsp播&nbsp&nbsp间</th>
<th class="title2">操&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp作</th>
</tr>
<tr>
<td><input id="Room_ID" class="Input" oninput='value=value.replace(/[^\d]/g,"")' placeholder="请输入直播间房号"/></td>
<td><button class="Send" onclick='Connect_Room(document.getElementById("Room_ID").value)'>绑定&改绑</button></td>
</tr>
<tr>
<td colspan="2"
><textarea id="Content" rows="22" cols="60" readonly></textarea></td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
/**
* 此JS由〔lZiMUl〕个人编写开发
* 部分函数是从网络参考的
* 禁止修改和倒卖 否则承担法律责任
* 可授权使用,QQ〔2908554069〕 答案〔程序员/主播〕
* BiliBili 地址〔https://space.bilibili.com/291883246〕
* 我的服务 包括〔JS定制〕〔JS美化〕〔JS加密〕〔JS解密〕〔JS编码〕〔JS解码〕
* 因为此脚本开源 所以我不加密了 到时候修改还麻烦
* 感谢大家支持

* 还有

* 本人只会JavaScript 不会Css 如果您会请加我QQ 
* 让我们一起为 《WebSocket Server Of Minecraft》网站加油吧

**/

document.getElementById("Close").setAttribute("disabled", "true");
document.getElementById("Close").style.background = "gray";

var ConnectStatus = false;
var Room_Numbers = null;

function DanMu(Room_Number, Callback) {
function ReadInt(Buffer, Start, Len) {
  let Result = 0;
  for (let Value = Len - 1; Value >= 0; Value--) {
    Result += Math.pow(256, Len - Value - 1) * Buffer[Start + Value];
  };
  return Result;
};

function WriteInt(Buffer, Value) {
  let Values = 0;
  while (Values < 4) {
    Buffer[Values] = Value / Math.pow(256, 4 - Values - 1);
    Values++;
  }
};

function Encode(Str, Op) {
  const Data = new TextEncoder("utf-8").encode(Str);
  const PacketLen = 16 + Data.byteLength;
  const Header = [0, 0, 0, 0, 0, 16, 0, 1, 0, 0, 0, Op, 0, 0, 0, 1];
  alert(Data.toString())
WriteInt(Header, PacketLen);
  return (new Uint8Array(Header.concat(...Data))).buffer;
};

function Decode(Blob) {
  return new Promise(function(Resolve, reject) {
    let Reader = new FileReader();
    Reader.onload = function(Event) {
      let Buffer = new Uint8Array(Event.target.result);
      let Result = {};
      Result.Code = ReadInt(Buffer, 8, 4);
      if (Result.Code === 5) {
        Result.Body = [];
        let Offset = 0;
        while (Offset < Buffer.length) {
          let PacketLen = ReadInt(Buffer, Offset, 4);
          let Body = new TextDecoder("utf-8").decode(Buffer.slice(Offset + 16, Offset + PacketLen));
          if (Body) {
            Result.Body.push(JSON.parse(Body));
          }
          Offset += PacketLen;
        }
      } else if (Result.Code === 3) {
        Result.Body = {
          count: ReadInt(Buffer, 16, 4)
        };
      }
      Resolve(Result);
    }
    Reader.readAsArrayBuffer(Blob);
  })
};
wss = new WebSocket("wss://broadcastlv.chat.bilibili.com:2245/sub");
wss.onopen = function() {
    wss.send(Token = Encode(JSON.stringify({
      "roomid": Room_Number
    }), 7));
alert(Token.toString())
    setInterval(function() {
      wss.send(Encode("", 2));
    }, 1000);
  };

wss.onmessage = async function(Event) {
    const Packet = await Decode(Event.data);
    switch (Packet.Code) {
      case 5:
        Packet.Body.forEach(function(Body) {
          switch (Body.cmd) {
            case 'DANMU_MSG':
    Callback(JSON.stringify({
"User": Body.info[2][1] ,
"Message": Body.info[1]
    }));
ws.send(JSON.stringify({
"body": {
"eventName": "WebSite",
"Request": {
"Type": "DanMu",
"Data": {
"User": Body.info[2][1] ,
"Message": Body.info[1]
    }}}}));
              break;
          }
        })
        break;
    }
  }
}

document.getElementById("Connect").addEventListener('click', function(){
if(document.getElementById("ConnectUrl").value){
document.getElementById("Connect").setAttribute("disabled", "true");
document.getElementById("Connect").style.background = "gray";
Toast({
Message:"正在连接请稍等",
Color: "orange",
Time:2000
});
setTimeout(function(){
ws = new WebSocket(`ws://${document.getElementById("ConnectUrl").value}`);
Connect();
}, 2000);
} else {
Toast({
Message:"请输入WebSocket服务器地址",
Color: "red",
Time:2000
});
}});

document.getElementById("Close").addEventListener('click', function(){
if(ConnectStatus == true){
ws.close()
Toast({
Message:"已断开",
Color: "red",
Time:2000
});
ConnectStatus = false;
document.getElementById("Connect").removeAttribute("disabled");
document.getElementById("Connect").style.background = "yellow";
document.getElementById("Close").setAttribute("disabled", "true");
document.getElementById("Close").style.background = "gray";
}})

function Connect(){
ws.onopen = function(){
ws.onmessage = function(Data){
const Result = JSON.parse(Data.data).Result;
setTimeout(function(){
if(Result == "true"){
Toast({
Message:"已连接至WebSocket服务器",
Color: "green",
Time:2000
});
ConnectStatus = true;
document.getElementById("Close").removeAttribute("disabled");
document.getElementById("Close").style.background = "yellow";
}}, 2000)
};
ws.onerror = function(){
document.getElementById("Connect").removeAttribute("disabled");
document.getElementById("Connect").style.background = "yellow";
document.getElementById("Close").setAttribute("disabled", "true");
document.getElementById("Close").style.background = "gray";
Toast({
Message:"WebSocket服务器发生了错误",
Color: "red",
Time:2000
});
}
ws.onclose = function(){
document.getElementById("Connect").removeAttribute("disabled");
document.getElementById("Connect").style.background = "yellow";
document.getElementById("Close").setAttribute("disabled", "true");
document.getElementById("Close").style.background = "gray";
Toast({
Message:"WebSocket服务器被关闭了",
Color: "red",
Time:2000
});
}};
var Delays = 0;
Delay()
function Delay(){
setTimeout(function(){
if(ConnectStatus == false){
if(Delays == 3){
Toast({
Message:"无法连接到WebSocket服务器",
Color: "red",
Time:2000
});
document.getElementById("Connect").removeAttribute("disabled");
document.getElementById("Connect").style.background = "yellow";
} else {
Delays++;
Delay();
}}}, 1000)
}}

function SendCommand (Type, Command){
if(ConnectStatus == true){
ws.send(JSON.stringify({
"body": {
"eventName": "WebSite",
"Request": {
"Type": Type,
"Data": Command
}}}));

Toast({
Message:"已发送指令",
Color: "green",
Time:2000
});
} else {
Toast({
Message:"请连接WebSocket服务器在进行指令发送",
Color: "red",
Time:2000
});
}}

document.getElementById("Run_File").addEventListener("click", function(){
alert();
});

function Connect_Room(Room_Number){
if(Room_Number !== Room_Numbers){
if(Room_Number){
alert('已更新')
Room_Numbers = Room_Number;
document.getElementById("Content").value = "";
DanMu(Number(Room_Number), function(Object){
document.getElementById("Content").value += "【" + JSON.parse(Object).User + "】：" + JSON.parse(Object).Message + "\n";
});
Toast({
Message: "成功绑定直播间",
Color: "green",
Time:2000
});
} else {
Toast({
Message: "房间号不能为空",
Color: "red",
Time:2000
});
}} else {
Toast({
Message: "房间号一致，无需更改",
Color: "red",
Time:2000
});
}};

function Toast(Strings){
let Establish = document.createElement("div");
Establish.setAttribute("id","Toast");
Establish.innerHTML = Strings.Message;
Establish.style.background = Strings.Color;
document.body.appendChild(Establish);
Establish.classList.add("FadeIn");
setTimeout(function(){
Establish.classList.remove("FadeIn"); 
Establish.classList.add("FadeOut");
Establish.addEventListener("animationend", function(){
Establish.classList.add("Hide");
});
},Strings.Time);
};
</script>
</html>