好友 阅读权限 10
听众 最后登录 1970-1-1
本帖最后由 meilon 于 2019-1-20 13:06 编辑 2017-8-24: 昨天做完也没细测, 今天一看好多BUG... 于是做了一些修改 : 隐藏了聊天窗口的滚动条; 添加了退出聊天室按钮; 添加了回车键发送消息的功能; 消息框在发送消息后会自动重获焦点; 修复了按回车键登陆连接错误的问题; 修复了不会自动下滚的BUG. 2017-8-26:感谢6767朋友的提醒 增加了xss过滤
[Java] 纯文本查看 复制代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String userName = (String)session.getAttribute("userName");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Mysocket</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/jquery.js"></script>
<script type="text/javascript" >
var ur = window.location.host;
var websocket = null;
var myName = "${userName}";
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
websocket = new WebSocket("ws://"+ur+"/chat/chatRoom/${userName}");
} else {
alert('您的浏览器不支持 websocket')
}
//连接发生错误的回调方法
websocket.onerror = function() {
showMessage("发生错误!");
};
//连接成功建立的回调方法
websocket.onopen = function() {
showMessage("连接成功!");
}
//连接关闭的回调方法
websocket.onclose = function() {
showMessage("连接已关闭!");
}
//关闭窗口时，自动断开websocket连接，server端会抛异常。
window.onbeforeunload = function() {
websocket.close();
}
//接收到消息的回调方法
websocket.onmessage = function(event) {
var data = JSON.parse(event.data);
var content;
if(data.sender=="system"){
content = "<span class='red'>系统 : " + data.content + "</span>";
}else if(data.recipient == myName){
content = "<span class='blue'>" + data.sender + " > 我 : " + data.content + "</span>";
}else if(data.recipient == "all"){
content = data.sender + " > 所有人 : " + data.content;
}else{
content ="<span class='blue'>" + data.sender + " > " + data.recipient + " : " + data.content + "</span>";
}
showMessage(content);
if(data.type == "updateList"){
userList(data.userList);
}
}
//将消息显示在网页上
function showMessage(content) {
$("#message").append("<p>" + content + "</p>");
document.getElementById('message').scrollTop = document.getElementById('message').scrollHeight;
}
//发送消息
function sendMessage() {
var text = $('#text').val();
if(text != ""){
websocket.send(text);
$('#text').val("");
}
$("#text").focus();
}
//绘制在线列表
function userList(list){
$("#user").empty();
for(var i in list){
$("#user").append("<li>" + list + "</li>");
}
}
//关闭连接
function closeWebSocket() {
websocket.close();
window.location = "index.html";
}
//回车键发送消息
$(window).keydown(function(event){
if(event.keyCode == 13) {
//阻止回车键默认行为
event.preventDefault();
sendMessage();
}
});
</script>
</head>
<body>
<div id="main" class="clearfix">
<div id="chat">
<div id="message" ></div>
<textarea id="text"></textarea>
<span class="grey"> @昵称+空格+消息内容(给指定用户发送消息)</span>
<span class="right">
<button class="button">离开聊天室</button>
<button class="button">发送(Enter)</button>
</span>
</div>
<div id="list">
<h4>在线人员</h4>
<ul id="user"> </ul>
</div>
</div>
</body>
</html>
chat_1.2.zip
(858.52 KB, 下载次数: 438)
查看全部评分
发帖前要善用【论坛搜索 】 功能，那里可能会有你要找的答案或者已经有人发布过相同内容了，请勿重复发帖。
[复制链接]
发表于 2017-8-23 23:37
