java 简单聊天室_Java 实现简单聊天室

一、加入JAR包 (javax.websocket-api-1.1.jar)

二、后台代码

package com.zhenzhigu.chat;

import java.text.SimpleDateFormat;

import java.util.Date;

import java.util.Vector;

import javax.websocket.OnClose;

import javax.websocket.OnError;

import javax.websocket.OnMessage;

import javax.websocket.OnOpen;

import javax.websocket.Session;

import javax.websocket.server.ServerEndpoint;

import net.sf.json.JSONObject;

@ServerEndpoint("/websocket")

public class ChatServer {

private static SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

private static Vectorroom = new Vector();

/**

* 用户接入

* @param session 可选

*/

@OnOpen

public void onOpen(Session session){

room.addElement(session);

}

/**

* 接收到来自用户的消息

* @param message

* @param session

*/

@OnMessage

public void onMessage(String message,Session session){

//把用户发来的消息解析为JSON对象

JSONObject obj = JSONObject.fromObject(message);

//向JSON对象中添加发送时间

obj.put("date", df.format(new Date()));

//遍历聊天室中的所有会话

for(Session se : room){

//设置消息是否为自己的

obj.put("isSelf", se.equals(session));

//发送消息给远程用户

se.getAsyncRemote().sendText(obj.toString());

}

}

/**

* 用户断开

* @param session

*/

@OnClose

public void onClose(Session session){

room.remove(session);

}

/**

* 用户连接异常

* @param t

*/

@OnError

public void onError(Throwable t){

}

}

三、前台js代码

$(function(){

var nickname = "一剪梅"+Math.random();

var socket = new WebSocket("ws://${pageContext.request.getServerName()}:${pageContext.request.getServerPort()}${pageContext.request.contextPath}/websocket");

//接收服务器的消息

socket.onmessage=function(ev){

var obj = eval('('+ev.data+')');

addMessage(obj);

};

$("#send").click(function(){

if (!um.hasContents()) { // 判断消息输入框是否为空

// 消息输入框获取焦点

um.focus();

// 添加抖动效果

$('.edui-container').addClass('am-animation-shake');

setTimeout("$('.edui-container').removeClass('am-animation-shake')", 1000);

} else {

//获取输入框的内容

var txt = um.getContent();

//构建一个标准格式的JSON对象

var obj = JSON.stringify({

nickname:nickname,

content:txt

});

// 发送消息

socket.send(obj);

// 清空消息输入框

um.setContent('');

// 消息输入框获取焦点

um.focus();

}

});

});

//人名nickname,时间date,是否自己isSelf,内容content

function addMessage(msg){

var box = $("#msgtmp").clone(); //复制一份模板,取名为box

box.show();//设置box状态为显示

box.appendTo("#chatContent");//把box追加到聊天面板中

box.find('[ff="nickname"]').html(msg.nickname); //在box中设置昵称

box.find('[ff="msgdate"]').html(msg.date); //在box中设置时间

box.find('[ff="content"]').html(msg.content); //在box中设置内容

box.addClass(msg.isSelf? 'am-comment-flip':'');//右侧显示

box.addClass(msg.isSelf? 'am-comment-warning':'am-comment-success');//颜色

box.css((msg.isSelf? 'margin-left':'margin-right'),"0%");//外边距

$("#ChatBox div:eq(0)").scrollTop(999999); //滚动条移动至最底部

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值