<!DOCTYPE html>
|
<html lang="zh-CN">
|
<head>
|
<meta charset="UTF-8">
|
<title>WebSocket聊天室</title>
|
<link rel="stylesheet" href="/layui/css/layui.css" media="all">
|
<style>
|
.chat-container {
|
width: 100%;
|
max-width: 800px;
|
margin: 20px auto;
|
border: 1px solid #e6e6e6;
|
border-radius: 4px;
|
overflow: hidden;
|
}
|
.chat-messages {
|
height: 400px;
|
padding: 15px;
|
overflow-y: auto;
|
background-color: #f8f8f8;
|
}
|
.chat-input {
|
padding: 15px;
|
background-color: #fff;
|
}
|
.message {
|
margin-bottom: 10px;
|
padding: 8px 12px;
|
border-radius: 4px;
|
background-color: #fff;
|
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
}
|
.message.me {
|
background-color: #1E9FFF;
|
color: white;
|
text-align: right;
|
}
|
</style>
|
</head>
|
<body>
|
<div class="layui-container">
|
<div class="chat-container">
|
<div class="chat-messages" id="chatMessages">
|
<!-- 消息将在这里显示 -->
|
</div>
|
<div class="chat-input">
|
<div class="layui-form">
|
<div class="layui-form-item">
|
<div class="layui-input-block">
|
<input type="text" id="messageInput" placeholder="请输入消息..." class="layui-input">
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<div class="layui-input-block">
|
<button class="layui-btn" id="sendBtn">发送消息</button>
|
<button class="layui-btn layui-btn-primary" id="connectBtn">连接</button>
|
<button class="layui-btn layui-btn-danger" id="disconnectBtn">断开</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<script src="/layui/layui.js" charset="utf-8"></script>
|
<script>
|
layui.use(['jquery'], function() {
|
var $ = layui.jquery;
|
var websocket;
|
|
function connect() {
|
if ('WebSocket' in window) {
|
// 连接到Netty WebSocket服务器
|
websocket = new WebSocket("ws://localhost:8090/ws");
|
|
websocket.onopen = function() {
|
appendMessage("[系统] 连接成功", "system");
|
};
|
|
websocket.onmessage = function(event) {
|
appendMessage(event.data, "other");
|
};
|
|
websocket.onclose = function() {
|
appendMessage("[系统] 连接已关闭", "system");
|
};
|
|
websocket.onerror = function() {
|
appendMessage("[系统] 连接发生错误", "system");
|
};
|
} else {
|
alert('您的浏览器不支持WebSocket');
|
}
|
}
|
|
function disconnect() {
|
if (websocket) {
|
websocket.close();
|
}
|
}
|
|
function sendMessage() {
|
var message = $('#messageInput').val().trim();
|
if (message && websocket) {
|
websocket.send(message);
|
appendMessage(message, "me");
|
$('#messageInput').val('');
|
}
|
}
|
|
function appendMessage(message, type) {
|
var messageClass = "message";
|
if (type === "me") {
|
messageClass += " me";
|
}
|
$('#chatMessages').append('<div class="' + messageClass + '">' + message + '</div>');
|
$('#chatMessages').scrollTop($('#chatMessages')[0].scrollHeight);
|
}
|
|
// 绑定事件
|
$('#connectBtn').on('click', connect);
|
$('#disconnectBtn').on('click', disconnect);
|
$('#sendBtn').on('click', sendMessage);
|
|
// 回车发送消息
|
$('#messageInput').on('keypress', function(e) {
|
if (e.which === 13) {
|
sendMessage();
|
}
|
});
|
});
|
</script>
|
</body>
|
</html>
|
