我的聊天室(源码)
本帖最后由 meilon 于 2019-1-20 13:06 编辑前几天就看到有人问聊天室, 就是一直没什么空, 这两天刚好没事, 就抽空做了一个.
研究websocket没几天, 做的一般.
2017-8-24: 昨天做完也没细测, 今天一看好多BUG...
于是做了一些修改 :
隐藏了聊天窗口的滚动条;
添加了退出聊天室按钮;
添加了回车键发送消息的功能;
消息框在发送消息后会自动重获焦点;
修复了异常退出导致昵称一直被占用的BUG;
修复了按回车键登陆连接错误的问题;
修复了不会自动下滚的BUG.
2017-8-26:感谢6767朋友的提醒
增加了xss过滤
基于websocket 后台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>
提醒一下，这个还有xss的隐患 本帖最后由 mylure 于 2018-2-12 16:28 编辑
为啥我的源码放云服务器里访问是403错误呢？楼主帮帮忙。
Forbidden
You don't have permission to access /chat/ on this server.
Additionally, a 403 Forbidden error was encountered while trying to use an ErrorDocument to handle the request.
Apache/2.4.18 Server at 114.67.231.155 Port 80 夭折啦~ 聊天室居然有人直播开车送豆腐的来了~ 一群老司机 66666666636666666 先收藏，谢谢楼主啦 这么简洁的聊天室，局域网的吗？ 6666666666666666666666，谢谢楼主的分享
献上评分 营养跟不上了，别开车