類似QQ的聊天工程
阿新 • • 發佈：2018-05-26
itl reat handle 聊天內容 rec ive tom ack chan
首先建立一個html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>far</title>
<style>
#chatWindow{
font-family: 微軟雅黑;
height:700px;
width:800px;
font-size:12px;/*字體大小*/
position: absolute;/*絕對定位*/
/*margin:auto;自動布局，容器居中*/
/*陰影效果*/
box-shadow: gray 0px 4px 5px;/*陰影：顏色*/
display: none;/*開始不顯示chatWindow這個div*/
}
#title{
height:40px;
line-height:40px;
/**/
/*背景漸變*/
background:-webkit-linear-gradient(left, #4B8CFE 0%,#ffffff 120%);
text-align: center;/*容器中的內容居中*/
color:white;/*字體顏色*/
}
#data{
height:400px;
border-top:1px solid gray;
border-bottom:1px solid gray;
overflow-y:auto;/*溢出部分顯示滾動條*/
padding: 2px;
}
#util>a{
display: inline-block;
width: 30px;
height: 25px;
margin: 0 5px;
}
#util>a:hover{
background-color: gray;
border-radius: 4px;
}
#send{
height:180px;
padding: 5px;/*上下左右都和輸入內容有點（5px)距離*/
outline: none;/*去掉邊框*/
overflow-y:auto;/*溢出部分顯示滾動條*/
}
#btns{
text-align: right;
padding-right: 10px;/*盒子的內容距離邊框的距離，簡稱內距離*/
}
.btnSetting{/* .代表class*/
width:72px;
height:28px;
display: inline-block;/*轉成行塊標簽*/
line-height: 28px;
border:1px solid gray;
font-size:12px;font-family:"微軟雅黑";text-align: center;
border-radius: 3px;/*圓角*/
text-decoration: none;/*去除下劃線*/
margin-right:10px;/*外間距，盒子與別的盒子的距離*/
vertical-align: 1px;/*垂直位置上的調整*/
}
.i1{
background:url("/images/1.jpg") no-repeat center;
}
.i2{
background: url("/images/2.jpg") no-repeat center;
}
.i3{
background: url("/images/3.jpg") no-repeat center;
}
.dataBox{
border-radius: 5px;
padding: 3px;
background-color: #66afe9;
color:black;
width:auto;/*內容不固定大小，多少內容就用多少空間，可換行*/
display: inline-block;
margin-left: 10px;
}
.fright{
float:right;
clear: both;
text-align: right;
}
.fleft{
float:left;
clear: both;
}
.dou{
clear:both;
text-align: center;
line-height: 30px;
border-radius: 5px;
background-color: #4B8CFE;
}
#closeBtn {
color: black; /*字體顏色*/
}
#closeBtn:hover{
background-color: #EFEFF0;
}
#sendBtn {
background-color: #4B8CFE;
color:white;/*字體顏色*/
}
#sendBtn:hover{
background-color: #47C8F8;
}
</style>
<link rel="stylesheet" href="/css/facebox.css">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.qqFace.js"></script>
<script>
var ws;
//#:找到id為chatBtn的節點，綁定一個點擊事件 $符號代表框架。
$(document).ready(function () {
$("#chatBtn").click(function () {
//找到nickName獲取val值。
var nickName = $("#nickName").val();
if ($.trim(nickName) == "") {//trim()函數的作用是去掉左右兩邊的空格。
alert("請輸入昵稱！");
return;//結束該函數
}
var url = "ws://" + window.location.hostname + ":8080/chatHandle/" + nickName;
//var url1="ws://"+window.location.hostname+":8080/chatHandle/"+fang;
//document.write(url+url1);
ws = new WebSocket(url);
//當後臺服務器發了消息的時候，獲取到後臺消息
ws.onmessage=function (chatBtn) {
var index=chatBtn.data.indexOf("\0");
if(index>=0) {
dou();
}
$("#data").scrollTop(520);
$("#data").append(chatBtn.data+"<br>");
}
$("#join").hide();
$("#chatWindow").show();
/*
關閉按鈕
*/
$("#closeBtn").click(function () {
ws.close();//關閉客戶端與服務端的連接
$("#join").show();
$("#chatWindow").hide();
})
/*
發送按鈕
*/
$("#sendBtn").click(function () {
var val=$("#send").html();
//清空
$("#send").html("");
//聚焦
$("#send").focus();
//獲取並發送
ws.send(val);
})
//添加快捷鍵
$("#send").keydown(function (event) {
if(event.altKey && event.keyCode==67){
$("#closeBtn").click();//模擬手動點擊，代碼點擊；
}
if((event.altKey && event.keyCode==83)|| event.keyCode==13){
$("#sendBtn").click();//模擬手動點擊發送按鈕，代碼點擊；
}
})
})
var reader=new FileReader();
var myFile=document.getElementById("myFile");
myFile.onchange=function () {
var chooseFile=myFile.files[0];
reader.readAsDataURL(chooseFile);
}
reader.onload=function () {
var obj=document.createElement("img");
obj.src=reader.result;
$("#send").append(obj);
}
$("#myFile").hide();
$(".i1").click(function () {
$("#myFile").click();
})
$(".i2").qqFace({
id:‘facebox‘,
assign:‘send‘,
path:‘arclist/‘
})
/*拖拽部分*/
var title=document.getElementById("title");
var pyx,pyy;
title.ondragstart=function (e) {
pyx=e.offsetX;
pyy=e.offsetY;
}
title.ondrag=function (e) {
var x=e.pageX;
var y=e.pageY;
if(x==0&&y==0) return;
$("#chatWindow").css("left",x-pyx);
$("#chatWindow").css("top",y-pyy);
}
$(".i3").click(function () {
ws.send("\0");
})
function dou() {
var initx=$("#chatWindow").offset().left;
var inity=$("#chatWindow").offset().top;
for(var i=0;i<=10;i++){
$("#chatWindow").animate({"left":initx-10,"top":inity-10},10);
$("#chatWindow").animate({"left":initx,"top":inity},10);
$("#chatWindow").animate({"left":initx+10,"top":inity+10},10);
$("#chatWindow").animate({"left":initx,"top":inity},10);
}
}
})
</script>
</head>
<body>
<div id="join"><!-----div可以看成一個盒子，容器。固定頁面布局。CSS（放head裏面）相當對html的"化妝"；------->
<input id="nickName" type="text"><br>
<input id="chatBtn" type="button" value="加入聊天室"><br>
</div>
<div id="chatWindow">
<div id="title" draggable="true">far away</div>
<div id="data"></div><!----聊天內容------->
<div id="util"><!--工具區域-->
<input type="file" id="myFile">
<a class="i1" href="javascript:;"></a>
<a class="i2" href="javascript:;"></a>
<a class="i3" href="javascript:;"></a>
</div>
<div id="send" contenteditable="true"></div><!----要發送內容------->
<div id="btns"><!------發送和關閉按鈕-------->
<a id="closeBtn" class="btnSetting" href="javascript:;">關閉(<u>C</u>)</a>
<a id="sendBtn" class="btnSetting" href="javascript:;">發送(<u>S</u>)</a>
</div>
</div>
</body>
</html>
後臺控制代碼：
package com.seecon.Chat.handle;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import javax.websocket.server.PathParam;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.List;
@ServerEndpoint("/chatHandle/{nickName}")
public class ChatHandle {
//創建一個靜態的“袋子”（跟對象無關），用來裝所有的session，也就是所有用戶的會話；
private static List<Session> users=new ArrayList<Session>();//static可以共享。
public static synchronized void add(Session session){//靜態方法不依賴對象
users.add(session);
}
public synchronized static void remove(Session session){
users.remove(session);
}
private void sendAll(String message){
for (Session user : users) {
user.getAsyncRemote().sendText(message);
}
}
private String nickName;/*當前會話的昵稱*/
@OnOpen
public void connect(Session session,@PathParam("nickName") String nickName) throws Exception {
System.out.println(nickName + "連接上了後臺服務器程序" + session);
add(session);
sendAll("<div class=‘fleft‘>-----歡迎[" + nickName + "]------加入聊天室 "+"當前聊天室人數:"+users.size()+"</div>");
this.nickName=nickName;
}
@OnClose
public void exit(Session session,@PathParam("nickName") String nickName) throws Exception{
remove(session);
sendAll("<div class=‘fright‘>----[" + nickName + "]------退出聊天室"+"當前聊天室人數:"+users.size()+"</div>");
}
@OnMessage
public void receiveMessage(Session session,String message) throws Exception{
Calendar c=Calendar.getInstance();
int hour=c.get(Calendar.HOUR_OF_DAY);
String hourStr=hour>=10?hour+"":"0"+hour;
int minute=c.get(Calendar.MINUTE);
String minuteStr=minute>=10?minute+"":"0"+minute;
int second=c.get(Calendar.SECOND);
String secondStr=second>=10?second+"":"0"+second;
String fullTime=hourStr+":"+minuteStr+":"+secondStr;
//構建message
if(message.equals("\0")){
message="<div class=‘dou‘>"+nickName+"給您發送了一個窗口抖動</div>";
String str=" "+fullTime+"<br>"+message;
sendAll("\0"+str);
}else {
message = "<div class=‘dataBox‘>" + message + "</div>";
String str = nickName + "  " + fullTime + "<br>" + message;
sendAllMessage(str, session);
}
}
private void sendAllMessage(String message,Session session){
//把Message的數據通知給所有會話
for(Session user:users){
if(user==session){
user.getAsyncRemote().sendText("<div class=‘fright‘>"+message+"</div>");
}
else{
user.getAsyncRemote().sendText("<div class=‘fleft‘>"+message+"</div>");
}
}
}
}
類似QQ的聊天工程