Skip to content

Commit

Permalink
add jsp file
Browse files Browse the repository at this point in the history
  • Loading branch information
@leelance
leelance committed Jun 21, 2017
1 parent 6d1fd3e commit 47e7751
Show file tree
Hide file tree
Showing 3 changed files with 386 additions and 0 deletions.
174 changes: 174 additions & 0 deletions spring-boot-websocket-netty-server/src/main/webapp/WEB-INF/views/chat.jsp
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>聊天详情</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="/resources/css/chat.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/resources/js/jquery-1.7.2.min.js"><\/script>')</script>
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--[if lt IE 7]>
<script src="/resources/js/IE7.js" type="text/javascript"></script>
<![endif]-->
<!--[if IE 6]>
<script src="/resources/js/iepng.js" type="text/javascript"></script>
<script type="text/javascript">
EvPNG.fix('body, div, ul, img, li, input, a, span ,label');
</script>
<![endif]-->

<script src="/resources/js/chat.js"></script>
</head>

<body class="keBody">
<div class="kePublic">
<!--效果html开始-->
<div class="content">
<div class="chatBox">
<div class="chatLeft">
<div class="chat01">
<div class="chat01_title">
<ul class="talkTo">
<li><a href="javascript:;" id="curName">Person</a></li></ul>
<a class="close_btn" href="javascript:;"></a>
</div>
<!-- Chat Content -->
<div class="chat01_content"></div>
</div>
<div class="chat02">
<div class="chat02_title">
<a class="chat02_title_btn ctb01" href="javascript:;"></a>
<label class="chat02_title_t"><a href="#">聊天记录</a></label>
<div class="wl_faces_box">
<div class="wl_faces_content">
<div class="title">
<ul>
<li class="title_name">常用表情</li><li class="wl_faces_close"><span>&nbsp;</span></li></ul>
</div>
<div class="wl_faces_main">
<ul>
<li><a href="javascript:;">
<img src="/resources/img/emo_01.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_02.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_03.gif" /></a></li>
<li><a href="javascript:;">
<img src="/resources/img/emo_04.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_05.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_06.gif" /></a></li>
<li><a href="javascript:;">
<img src="/resources/img/emo_07.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_08.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_09.gif" /></a></li>
<li><a href="javascript:;">
<img src="/resources/img/emo_10.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_11.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_12.gif" /></a></li>
<li><a href="javascript:;">
<img src="/resources/img/emo_13.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_14.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_15.gif" /></a></li>
<li><a href="javascript:;">
<img src="/resources/img/emo_16.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_17.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_18.gif" /></a></li>
<li><a href="javascript:;">
<img src="/resources/img/emo_19.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_20.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_21.gif" /></a></li>
<li><a href="javascript:;">
<img src="/resources/img/emo_22.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_23.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_24.gif" /></a></li>
<li><a href="javascript:;">
<img src="/resources/img/emo_25.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_26.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_27.gif" /></a></li>
<li><a href="javascript:;">
<img src="/resources/img/emo_28.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_29.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_30.gif" /></a></li>
<li><a href="javascript:;">
<img src="/resources/img/emo_31.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_32.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_33.gif" /></a></li>
<li><a href="javascript:;">
<img src="/resources/img/emo_34.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_35.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_36.gif" /></a></li>
<li><a href="javascript:;">
<img src="/resources/img/emo_37.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_38.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_39.gif" /></a></li>
<li><a href="javascript:;">
<img src="/resources/img/emo_40.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_41.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_42.gif" /></a></li>
<li><a href="javascript:;">
<img src="/resources/img/emo_43.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_44.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_45.gif" /></a></li>
<li><a href="javascript:;">
<img src="/resources/img/emo_46.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_47.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_48.gif" /></a></li>
<li><a href="javascript:;">
<img src="/resources/img/emo_49.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_50.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_51.gif" /></a></li>
<li><a href="javascript:;">
<img src="/resources/img/emo_52.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_53.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_54.gif" /></a></li>
<li><a href="javascript:;">
<img src="/resources/img/emo_55.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_56.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_57.gif" /></a></li>
<li><a href="javascript:;">
<img src="/resources/img/emo_58.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_59.gif" /></a></li><li><a href="javascript:;">
<img src="/resources/img/emo_60.gif" /></a></li>
</ul>
</div>
</div>
<div class="wlf_icon"></div>
</div>
</div>
<div class="chat02_content">
<textarea id="textarea"></textarea>
</div>
<div class="chat02_bar">
<ul>
<li style="left: 20px; top: 10px; padding-left: 30px;"></li>
<li style="right: 5px; top: 5px;"><a href="javascript:;">
<img src="/resources/img/send_btn.jpg"></a>
</li>
</ul>
</div>
</div>
</div>
<div class="chatRight">
<div class="chat03">
<div class="chat03_title">
<label class="chat03_title_t">成员列表</label>
</div>
<div class="chat03_content" id="chatList">
<ul></ul>
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
</div>
</div>

<input type="hidden" id="Token" value="${token}">
</body>
</html>
93 changes: 93 additions & 0 deletions spring-boot-websocket-netty-server/src/main/webapp/WEB-INF/views/index.jsp
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>在线竞拍商品登录</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #eee;
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
</style>
</head>
<body>
<div class="container">

<form class="form-signin" action="/login" method="post">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="inputPwd" class="sr-only">Phone</label>
<input type="text" id="inputPwd" class="form-control" placeholder="Phone" name="phone" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" name="password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">登 录</button>
</form>

</div>
<script type="text/javascript">
(function () {
'use strict';
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style')
msViewportStyle.appendChild(
document.createTextNode(
'@-ms-viewport{width:auto!important}'
)
)
document.querySelector('head').appendChild(msViewportStyle)
}
})();
</script>
</body>
</html>
119 changes: 119 additions & 0 deletions spring-boot-websocket-netty-server/src/main/webapp/WEB-INF/views/list.jsp
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>详情页面</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
input[type=button] {
margin: 5px;
width: 50px;
height: 35px;
border: none;
color: white;
font-weight: bold;
outline: none;
}
.clear {
background: red;
}
.send {
background: green;
}
.clear:active {
background: yellow;
}
.send:active {
background: yellow;
}
</style>
<script>
var websocket;
var token = "${token}"
if ('WebSocket' in window) {
websocket = new WebSocket("ws://10.0.2.21/ws?token="+token);
} else if ('MozWebSocket' in window) {
websocket = new MozWebSocket("ws://10.0.2.21/ws"+token);
} else {
websocket = new SockJS("http://10.0.2.21/ws/sockjs"+token);
}
websocket.onopen = function(event) {
console.log("WebSocket:已连接");
};
websocket.onmessage = function(event) {
var data=JSON.parse(event.data);
console.log("WebSocket:收到一条消息",data);
var record = "<tr>"
+'<td>'+data.from+'</td>'
+'<td>'+data.text+'</td>'
+'<td>'+data.date+'</td>'
+'</tr>';
console.log(record);
$("#content").append(record);
};
websocket.onerror = function(event) {
console.log("WebSocket:发生错误 ");
};
websocket.onclose = function(event) {
console.log("WebSocket:已关闭");
}
function sendMsg(){
var v=$("#msg").val();
if(v==""){
return;
}else{
var data={};
data["from"]=token;
data["text"]=v;
websocket.send(JSON.stringify(data));
$("#msg").val("");
}
}
function send(event){
var code;
if(window.event){
code = window.event.keyCode; // IE
}else{
code = event.which; // Firefox
}
if(code==13){
sendMsg();
}
}
function clearAll(){
$("#content").empty();
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<table class="table table-striped table-bordered" id="content"></table>
</div>
<div class="row">
<input type="text" placeholder="请输入要发送的信息" id="msg" class="msg" onkeydown="send(event)">
<input type="button" value="发送" class="send" onclick="sendMsg()" >
<input type="button" value="清空" class="clear" onclick="clearAll()">
</div>
</div>
</body>
</html>

0 comments on commit 47e7751

Please sign in to comment.