通过websocket实现聊天室主要是将消息进行广播,把消息发送给其他的用户会话中去,通过消息推送,推送到每一个session里面去。
通过一个静态共享变量如List获取所有的session通道,然后遍历这个List,把消息广播出去。
public void broadcast(List<Session> sessions,String msg) {
for(Session session : sessions) {
try {
//发送消息
session.getBasicRemote().sendText(msg);
} catch (IOException e) {
e.printStackTrace();
}
}
}
这样就实现了聊天室的基本功能。如果需要单点聊天,则在广播时进行一个过滤,传入合适的session列表参数,再进行广播,这样就可以实现私聊的功能。
demo:《websocket聊天室》,里面有详细的代码,本博文中,将会展示前端JSP的代码以及后端处理消息的代码。
实例如图:
前端代码:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>chat</title>
</head>
<body>
<div id="container" style=" border:1px solid black; width:400px;height:400px;float:left;">
<div id="content" style="height:350px;"></div>
<div style="border-top:1px solid black;width:400px;height:50px;">
<input id="msg" /><button onclick="sendMsg();">send</button>
</div>
</div>
<div id="userList" style="border:1px solid black;width:150px;height:400px;float:left;"></div>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
//从session域中获取值
var username = "${sessionScope.username}";
var ws;
var target = "ws://localhost:8080/websocket/chat"+"?"+username;//将该值传递到后台
window.onload = function(){
if ('WebSocket' in window) {
ws = new WebSocket(target);
} else if ('MozWebSocket' in window) {
ws = new MozWebSocket(target);
} else {
alert('WebSocket is not supported by this browser.');
return;
}
ws.onmessage = function(event){
//转为JSON字符串
eval("var message = "+event.data+";");
//消息列表,直接追加消息
$("#content").append(message.msg);
//用户列表,有用户进入或退出时刷新列表
if(undefined!=message.userList){
//遍历前,先清空
$("#userList").html("");
$(message.userList).each(function(){
var own = "";
if(username==this){
own = "(我)"
}
$("#userList").append("<input type='checkbox' checked='checked' value='"+this+"' />"+this+own+"<br/>");
});
}
}
}
function sendMsg(){
var checked="";
$.each($('input:checkbox:checked'),function(){
checked+=$(this).val()+"#P#";
});
if(""==checked){
alert("请选中要接收消息的人");
return;
}
var msg = $("#msg").val();
//拼接格式消息
ws.send(checked+"#S#"+msg);
$("#msg").val("");
}
</script>
</html>
后端代码:
@ServerEndpoint("/chat")
public class ChatSocket {
private String username;//保存登录的用户名,一个通道一个用户名
//静态变量,存储所有通道的session和用户名
private static List<Session> sessionList = new LinkedList<>();
private static List<String> userList = new LinkedList<>();
//使用Map进行存储
private static Map<String,Session> map = new HashMap<>();
/**
* 建立websocket连接
* @param session
*/
@OnOpen
public void open(Session session) {
username = session.getQueryString();//获取前台传递的值,即“?”后面的字符
//System.out.println(username);
//将新的会话和用户名放入容器中
sessionList.add(session);
userList.add(username);
//将新的会话和用户名放入容器中,用于私聊时找到对应的人
//可以将整个的sessionList、userList合并到一个map中
map.put(username, session);
Message message = new Message();
String msg = "欢迎<font color=blue>"+username+"</font>进入聊天室!<br/>";
message.setUserList(userList);
message.setMsg(msg);
//广播
broadcast(sessionList,message.toJson());
//toJson方法将message变成json字符串,需要引入Gson的jar包
}
/**
* 广播消息
* 将消息发给所有的会话
* @param sessions 接收会话的容器
* @param msg 发送的消息
*/
public void broadcast(List<Session> sessions,String msg) {
for(Session session : sessions) {
try {
//发送消息
session.getBasicRemote().sendText(msg);
} catch (IOException e) {
e.printStackTrace();
}
}
}
/**
* 关闭websocket连接
* @param session
*/
@OnClose
public void close(Session session) {
//关闭后,从容器中移除
sessionList.remove(session);
userList.remove(username);
//关闭后,从容器中移除
map.remove(username);
Message message = new Message();
String msg = "<font color=blue>"+username+"</font>离开聊天室!<br/>";
message.setUserList(userList);
message.setMsg(msg);
broadcast(sessionList,message.toJson());
}
/**
* 发送消息
* --私聊
* --群聊
* @param session
* @param msg
*/
@OnMessage
public void message(Session session,String msg) {
Message message = new Message();
//消息与接收人之间,前台使用#S#作为分隔符
String[] msgs = msg.split("#S#");
//选择的接收人使用#P#作为分隔符
String[] tos = msgs[0].substring(0, msgs[0].length()-3).split("#P#");
if(tos!=null) {
if(tos.length==map.size()) {
msg = "<font color=blue>"+username + "</font>【"+new Date().toLocaleString()+"】:<br/>"+msgs[1]+"<br/>";
message.setMsg(msg);
broadcast(sessionList,message.toJson());
}else {
LinkedList<Session> sessions = new LinkedList<>();
boolean flag = true;//是否把自己也勾选上了
for(String name : tos) {
sessions.add(map.get(name));
//已经勾选上了自己
if(username.equals(name)) {
flag = false;
}
}
//如果没有勾选自己,后台进行消息的回显,即强制性的勾选自己
if(flag) {
sessions.add(map.get(username));
}
msg = "<font color=red>"+username + "(私聊)</font>【"+new Date().toLocaleString()+"】:<br/>"+msgs[1]+"<br/>";
message.setMsg(msg);
broadcast(sessions,message.toJson());
}
}else {
msg = msgs[0].substring(0, msgs[0].length()-3);
message.setMsg(msg);
broadcast(sessionList,message.toJson());
}
}
}