JAVA WebSocKet ( 简单的聊天室 )
Posted 被遗忘的优雅
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JAVA WebSocKet ( 简单的聊天室 )相关的知识，希望对你有一定的参考价值。
1, 前端代码 登入页 -> login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>聊天室登入接口</title>
<script type="text/javascript" src="JavaScript/jQuery.js"></script>
</head>
<body>
请输入账号名: <input id="UserName" type="text" value="">
<input id="Submit" type="submit" value="登入">
</body>
<script type="text/javascript">
$(\'#Submit\').on(\'click\', function(){
var userName = $(\'#UserName\').val().trim();
if(userName == \'\'){
console.error("账号名不能为空")
return;
}
location.href = "ChatRoom.html?UserName=" + userName;
});
</script>
</html>
2, 前端代码 聊天页面 -> ChatRoom
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>聊天室</title>
<script type="text/javascript" src="JavaScript/jQuery.js"></script>
<style type="text/css">
*{ margin: 0; padding: 0; outline: none; border: none; float: left;}
#Chat{
width: 800px;
height: 600px;
border: 1px solid #000000;
margin: 20px 0 0 20px;
}
#Content{
width: 600px;
height: 400px;
overflow-y: scroll;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
.ContentList{
width: 100%;
border-bottom: 1px solid #CCC;
padding: 5px 0 10px 0;
}
.User{
width: 30%;
line-height: 20px;
font-size: 16px;
color: red;
text-indent: 10px;
}
.Time{
width: 70%;
line-height: 20px;
font-size: 14px;
text-indent: 10px;
}
.Text{
margin: 8px 0 0 0;
width: 100%;
line-height: 20px;
font-size: 14px;
text-indent: 28px;
}
#UserList{
border-bottom: 1px solid black;
height: 400px;
width: 199px;
overflow-y: scroll;
}
#UserList > div{
width: 100%;
line-height: 28px;
font-size: 16px;
text-indent: 32px;
color: green;
border-bottom: 1px solid #CCC;
}
#InputFrame{
width: 800px;
height: 199px;
}
.input{
width: 98%;
height: 169px;
display: block;
line-height: 30px;
font-size: 18px;
font-weight: bold;
padding: 0 0 0 2%;
border-bottom: 1px solid #CCC;
}
.submit{
width: 100px;
height: 29px;
padding: 5px;
float: right;
margin: 0 0 0 10px;
}
</style>
</head>
<body>
<div id="Chat">
<div id="Content">
</div>
<div id="UserList">
</div>
<div id="InputFrame">
<textarea class="input"></textarea>
<input class="submit" type="button" value="发送">
<input class="submit" type="button" value="取消">
</div>
</div>
</body>
<script type="text/javascript">
// GET 传值的获取方法
(function($){
var url = location.search.substring(1);
var atr = url.split(\'&\');
var value = {};
for(var i = 0; i < atr.length; i ++){
value[atr[i].split(\'=\')[0]] = decodeURIComponent(atr[i].split(\'=\')[1]);
}
$.extend({
GetUrlValue : function(key){
return value[key];
}
});
})(jQuery);
// 创建 WebSocket 的方法
function createWebSocket(urlValue){
if("WebSocket" in window){
return new WebSocket(urlValue);
}
if ("MozWebSocket" in window){
return new MozWebSocket(urlValue);
}
console.error("浏览器不支持 WebSocKet");
}
// 构建请求的地址
var requestUrl = "ws://192.168.0.103/WebTest/ChatRoomForWebSocket?UserName=" + $.GetUrlValue("UserName");
var webSocket = createWebSocket(requestUrl);
webSocket.onmessage = function(e){
console.log(e.data);
if(e.data == "error"){
alert("用户名已经被占用,请重新登入!");
location.href = "Login.html";
}
e = $.parseJSON(e.data);
if(e.type == \'0\'){
var data = e.data;
var str = "";
for(var i = 0; i < data.length; i++){
str += \'<div>\'+ data[i].name +\'</div>\';
}
$(\'#UserList\').html(str);
}
if(e.type == \'1\'){
var data = e.data;
var str = \'<div class="ContentList">\';
str += \'<div class="User">\'+ data.name +\'</div>\';
str += \'<div class="Time">\'+ data.time +\'</div>\';
str += \'<div class="Text">\'+ data.msg +\'</div>\';
str += \'</div>\';
$(\'#Content\').append(str);
}
}
$(\'.submit\').on(\'click\', function(){
var inputValue = $(this).val();
if(inputValue == "发送"){
var sendValue = $(\'.input\').val().trim();
if(sendValue == \'\'){
alert("发送内容不能为空");
} else {
// 将换行符替换为 <br> 标签
sendValue = sendValue.replace(/\\n/g, "<br>");
webSocket.send(sendValue);
}
}
$(\'.input\').val(\'\');
});
</script>
</html>
3, JAVA后台处理代 以上是关于JAVA WebSocKet ( 简单的聊天室 )的主要内容，如果未能解决你的问题，请参考以下文章 SpringBoot——SpringBoot集成WebSocket实现简单的多人聊天室