master

分支 (1)

管理

管理

master

go-game-client
/
websocket_test.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.9.1.min.js"></script>
		<script>

			/**
			 * 页面加载时触发
			 */
			window.onload = function(){
				//初始化websocket
				initWs();
			}

			/**
			 * 初始化websocket连接
			 */
			var ws;
			function initWs(){

				//判断浏览器是否支持WebSocket技术
				if(window.WebSocket){
					//支持websocket

					//连接websocket服务器
					ws = new WebSocket("ws://localhost:8080/gobank");

					//给ws对象设置回调方法
					ws.onopen = function(){
						console.log("已经成功连接了服务器....");
						showMsg("成功连接服务器！");
					}

					ws.onclose = function(){
						console.log("与服务器的连接已经断开....");
						showMsg("与服务器断开连接！");
					}

					ws.onerror = function(e){
						console.log("与服务器连接发生异常....")
					}

					ws.onmessage = function(resp){
						console.log("接收到服务器的消息：" + resp.data);
						//展示到聊天框
						showMsg("other:" + resp.data);
					}
				} else {
					alert("骚瑞，您的浏览器不支持WebSocket，请更换更高级的浏览器");
				}

			}

			/**
			 * 发送消息
			 */
			function sendMsg(){
				var msg = $("#msg").val();

				if(msg == null || msg.trim() == ""){
					alert("发送消息不能为空！");
					return;
				}

				//展示到聊天框
				showMsg("我：" + msg);

				//清空输入框
				$("#msg").val("");

				//将msg发送到服务端
				sendMsgToServer(msg);
			}

			/**
			 * 展示一些内容到DIV中
			 */
			function showMsg(msg){
				$("#msgs").append(msg + "<br/>");
			}

			/**
			 * 发送消息到服务端
			 */
			function sendMsgToServer(msg){
				if(ws){
					ws.send(msg);//只能传递字符串
				} else {
					alert("websocket连接异常！");
				}
			}

		</script>
	</head>
	<body>

		<!-- 聊天的消息列表 -->
		<div id="msgs" style="margin: 20px; border: 1px solid #000000; width: 600px; height: 500px;">

		</div>


		<input id="msg" style="margin: 20px;"/> <button onclick="sendMsg()">发送</button>

	</body>
</html>