Home Explore Help
Register Sign In
yichael
/
yichael_chatingroom
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

init

yichael 4 years ago
commit
659c82d82d
4 changed files with 285 additions and 0 deletions
Split View Show Diff Stats
  1. 75 0
      帧同步游戏引擎客户端/index.html
  2. 73 0
      帧同步游戏引擎客户端/lockStepClient.js
  3. 76 0
      帧同步游戏引擎客户端/main.js
  4. 61 0
      聊天室/静态页面局部刷新.html

+ 75 - 0
帧同步游戏引擎客户端/index.html
View File 

@@ -0,0 +1,75 @@
 
+<html>
 
+<head>
 
+<style>
 
+	html, body {
 
+		margin:0;
 
+		padding:0;
 
+	}
 
+	#bg{
 
+		height:100%;
 
+		width:100%;
 
+		border: 1px solid green;
 
+		position:fixed;
 
+		/*background: url(image/login.jpg) no-repeat;text-align:center;*/
 
+		/*font-size:2.4em;*/
 
+	}
 
+	#server-info {
 
+		width:100%;
 
+		/*height:10%;*/
 
+		margin: 5%;
 
+		font-size:3.4em;
 
+		/* border:1px solid red; */
 
+	}
 
+	#message{
 
+		font-size:2.4em;
 
+		margin: 5%;
 
+	}
 
+	#message_input{
 
+		font-size:1.4em;
 
+		width:50%;
 
+		height:1.2em;
 
+		border-radius:4px;
 
+		/*border:1px solid #c8cccf;*/
 
+		border:1px solid black;
 
+		/*color:#6a6f77;*/
 
+		color:black;
 
+	}
 
+	#message_sumit{
 
+		width:20%;
 
+		height:5%;
 
+		font-size:1.0em;
 
+	}
 
+
 
+	#textarea {
 
+		/*border:5px;*/
 
+		/*border-radius:5px;*/
 
+		background-color:rgba(241,241,241,.98);
 
+		width: 355px;
 
+		height: 100px;
 
+		padding: 10px;
 
+		resize: none;
 
+		font-size:50px;
 
+		margin: 5%;
 
+	/*" placeholder="询价备注（尺寸、材质等）"*/
 
+	}
 
+</style>
 
+	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
 
+	<script src="lockStepClient.js"></script>
 
+	<script src="main.js"></script>
 
+</head>
 
+
 
+<body>
 
+	<div id = 'bg'>
 
+		<div id = 'server-info'>服务器返回信息</div>
 
+		<div id="message" >
 
+			<div id="title">用户名:</div>
 
+			<input type="text" name="message" id="message_input">
 
+			<input type="submit" value="匹配" id="message_sumit">
 
+		</div>
 
+		<div Id = 'textarea'>
 
+			<textarea Id="textarea_id" rows="30" cols="120"></textarea>
 
+		</div>
 
+	</div>
 
+
 
+</body>
 
+</html>

+ 73 - 0
帧同步游戏引擎客户端/lockStepClient.js
View File 

@@ -0,0 +1,73 @@
 
+let lockStepClient = {
 
+    matchCallback:null,
 
+    onMessageRecCallback:null,
 
+    login(openid,name,avatarUrl,gender,callback)
 
+    {
 
+        if(openid ==='' || name ==='' ||avatarUrl ==='' ||gender ==='' ||callback == null) return;
 
+
 
+        let Self = this;
 
+        this.ws = new WebSocket("ws://localhost:3000");
 
+        // var ws = new WebSocket("ws://121.4.59.141:3000/node/");
 
+        // var ws = new WebSocket("ws://www.yuyekeji.cn:3000/node/");
 
+        console.log("WebSocket建立成功");
 
+
 
+         this.ws.onopen = function () {
 
+            //当WebSocket创建成功时，触发onopen事件
 
+            console.log("open");
 
+
 
+             let player_info = {};
 
+             player_info.type = "login";
 
+             player_info.openid = name;
 
+             player_info.name = name;
 
+             player_info.avatarUrl = avatarUrl;
 
+             player_info.gender = gender;
 
+             Self.ws.send(JSON.stringify(player_info)); //将消息发送到服务端
 
+            callback();
 
+        }
 
+
 
+        this.ws.onmessage = function (e) {
 
+            //当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
 
+            // console.log(e.data);
 
+            let data_json = JSON.parse(e.data);
 
+            if(data_json.type === 'match')
 
+            {
 
+                Self.matchCallback(data_json.openid,data_json.name,data_json.avatarUrl,data_json.gender);
 
+            }
 
+            else if(data_json.type === 'message')
 
+            {
 
+                Self.onMessageRecCallback(data_json.message);
 
+            }
 
+        }
 
+
 
+        this.ws.onclose = function (e) {
 
+            //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
 
+            console.log("close");
 
+        }
 
+
 
+        this.ws.onerror = function (e) {
 
+            //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
 
+            console.log(error);
 
+        }
 
+    },
 
+    match(openid,callback)
 
+    {
 
+        if(openid ==='' || callback == null) return;
 
+        let obj = {};
 
+        obj.type = 'match';
 
+        obj.openid = openid;
 
+        this.matchCallback = callback;
 
+        this.ws.send(JSON.stringify(obj));
 
+    },
 
+    sendMessage(openid,message)
 
+    {
 
+        if(openid ==='' || message ==='') return;
 
+
 
+        let obj = {};
 
+        obj.type = 'message';
 
+        obj.openid = openid;
 
+        obj.message = message;
 
+        this.ws.send(JSON.stringify(obj));
 
+    }
 
+}
 
+
 
+// module.exports = lockStepClient;

+ 76 - 0
帧同步游戏引擎客户端/main.js
View File 

@@ -0,0 +1,76 @@
 
+let main = {
 
+    openid:'',
 
+    init(name){
 
+
 
+        let Self = this;
 
+        this.openid = name;
 
+        let avatarUrl = 'https://';
 
+        let gender = '1';
 
+
 
+        lockStepClient.login(this.openid,name,avatarUrl,gender,function (){
 
+            document.getElementById("server-info").innerHTML = "已建连接!";
 
+            $("#message").hide();
 
+
 
+            let count_down_num = 1;
 
+            let countDownTimer = setInterval(function () {
 
+                if(count_down_num==-1)
 
+                {
 
+                    clearInterval(countDownTimer);
 
+                    return;
 
+                }
 
+
 
+                document.getElementById("server-info").innerHTML = "正在匹配"+count_down_num+"秒";
 
+                count_down_num++;
 
+            },1000)
 
+
 
+            lockStepClient.match(Self.openid,function (other_openid,other_name,other_avatarUrl,other_gender) {
 
+                count_down_num = -1;
 
+
 
+                $("#message").show();
 
+                $("#title").text('发送信息:');
 
+                $("#message_sumit").attr("value","发送");
 
+                $("#message_input").val('');
 
+
 
+                document.getElementById("server-info").innerHTML = '匹配上玩家：“'+other_name;
 
+                // 给文本框赋值
 
+                document.getElementById("textarea_id").value = '匹配上玩家：“'+other_name;
 
+                // 跳转最后一行
 
+                document.getElementById("textarea_id").scrollTop=document.getElementById("textarea_id").scrollHeight;
 
+                //监听回调
 
+                let event = function (message) {
 
+                    Self.onMessageRec(message);
 
+                }
 
+                lockStepClient.onMessageRecCallback = event;
 
+            });
 
+        });
 
+    },
 
+    sendMessage(message){
 
+        console.log('this.openid=',this.openid)
 
+        lockStepClient.sendMessage(this.openid,message);
 
+        $("#message_input").val('');
 
+    },
 
+    onMessageRec(message){
 
+
 
+        // 给文本框赋值
 
+        document.getElementById("textarea_id").value = document.getElementById("textarea_id").value+'\n'+message;
 
+        // 跳转最后一行
 
+        document.getElementById("textarea_id").scrollTop=document.getElementById("textarea_id").scrollHeight;
 
+    }
 
+}
 
+window.onload = function(){
 
+
 
+    $('#message_sumit').on('click', function(){
 
+        let inputValue = document.getElementById("message_sumit").value;
 
+
 
+        if(inputValue === '匹配')
 
+        {
 
+            let name = $("#message_input").val();
 
+            if(name==='') alert('名字不能为空')
 
+            main.init(name);
 
+        }
 
+        else {
 
+            let message = $("#message_input").val();
 
+            main.sendMessage(message);
 
+        }
 
+    })
 
+}

+ 61 - 0
聊天室/静态页面局部刷新.html
View File 

@@ -0,0 +1,61 @@
 
+<html>
 
+<head>
 
+<style>
 
+	#server-info {
 
+		width:50%; 
+		height:20%;
 
+		font-size:40px;
 
+		/* border:1px solid red; */
 
+	}
 
+	#textarea {
 
+		width:100%; 
+		height:auto;
 
+		/* border:1px solid red; */
 
+	}
 
+/* p {color:blue} */
 
+</style>
 
+</head>
 
+
 
+<body>
 
+	<div Id = 'server-info'>服务器返回信息</div>
 
+	<div Id = 'textarea'>
 
+		<textarea Id="textarea_id" rows="30" cols="120"></textarea>
 
+	</div>
 
+	
+	<script>
 
+		let str = '';
 
+
 
+		// var ws = new WebSocket("ws://localhost:3000");
 
+		// var ws = new WebSocket("ws://121.4.59.141:3000/node/");
 
+		var ws = new WebSocket("ws://www.yuyekeji.cn:3000/node/");
 
+		console.log("WebSocket建立成功");
 
+		//申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
 
+		ws.onopen = function () {
 
+			//当WebSocket创建成功时，触发onopen事件
 
+			console.log("open");
 
+			document.getElementById("server-info").innerHTML = "已建立服务端连接！"
 
+			ws.send('{"name":"22","type":"login","user_name":"","message":""}'); //将消息发送到服务端
 
+		}
 
+		ws.onmessage = function (e) {
 
+			//当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
 
+			console.log(e.data);
 
+			let data_json = JSON.parse(e.data);
 
+			document.getElementById("server-info").innerHTML = '收到来自“'+data_json.name+'”的消息:<br />'+data_json.message;
 
+			str=str+data_json.message+'\n';
 
+
 
+			// 给文本框赋值
 
+			document.getElementById("textarea_id").value = str;
 
+			// 跳转最后一行
 
+			document.getElementById("textarea_id").scrollTop=document.getElementById("textarea_id").scrollHeight;
 
+		}
 
+		ws.onclose = function (e) {
 
+			//当客户端收到服务端发送的关闭连接请求时，触发onclose事件
 
+			console.log("close");
 
+		}
 
+		ws.onerror = function (e) {
 
+			//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
 
+			console.log(error);
 
+		}
 
+	</script>
 
+</body>
 
+</html>