websocket.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" ???pageEncoding="UTF-8"%><%@include file="/common/common-uplan.jsp"%><script>var wsUri ="ws://localhost:8080/xbnet-product-web/websocket?username=${user.name}&userId=${user.operatorId}"; //判断浏览器是否支持websocketif(window.WebSocket){ ???//创建websocket连接 ???websocket = new WebSocket(wsUri); ???console.log(‘This browser supports WebSocket‘);}else{ ???console.log(‘This browser does not supports WebSocket‘);}//连接成功建立的回调方法websocket.onopen = function() { ????writeToScreen("webSocket连接成功"); }; //连接关闭的回调方法 websocket.onclose = function() { ?????writeToScreen("webSocket连接关闭"); }; ????//接收到消息的回调方法websocket.onmessage = function(event) { ????writeToScreen(event.data);}; //连接发生错误的回调方法websocket.onerror = function() { ????writeToScreen("WebSocket连接发生错误");}; ??//关闭WebSocket连接function closeWebSocket() { ???websocket.close();} ?function doSend() { ????var text = $("#text") .val(); ???var users = $(‘input:checkbox:checked‘); ???var touser = ""; ???if (users.length ?== 0){ ???????alert("请选择发送人！"); ???????return; ???} else{ ???????for (var i = 0; i < users.length; i++){ ???????????touser += users[i].value + "|"; ???????} ???} ???if (text != "" && text != undefined && text != null){ ???????var obj = null; ???????obj = { ???????????????toUser:touser, ?????????????????fromUser:"${user.operatorId}", ?????????????????msg:text ???????}; ???????obj = JSON.stringify(obj); ???????websocket.send(obj); ???????$("#text") .val(""); ???}} ?function writeToScreen(message) { ????var output = document.getElementById(‘output‘); ???var pre = document.createElement("p"); ????pre.style.wordWrap = "break-word"; ????pre.innerHTML = message; ????output.appendChild(pre); } ?//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。window.onbeforeunload = function () { ???closeWebSocket();}</script><div id="main"> ???<div id="left" style="width: 350px;height: 280px;float: left;"> ???????<!-- 消息显示栏 --> ???????<div id="output" style="width: 350px;height: 240px"></div><hr/> ???????????????<!-- 消息发送栏 --> ???????<input id="text" type="text"/> ???????<button onclick="doSend()">发送消息</button> ???</div> ???????????<!-- 用户列表 --> ???<div class="up-form-group up-col-sm-24" style="width: 100px;height: 280px;float: right;border-left:1px solid gray"> ????????<c:forEach items="${operator }" var="rowdata" varStatus="status"> ????????????<div class="up-col-sm-24"> ????????????????<label class="u_check"> ????????????????????<input id="" value="${rowdata.operatorId }" type="checkbox"> ????????????????????<i class="up-text-primary icon-u-check-empty"></i>${rowdata.name } ????????????????</label> ????????????</div> ????????</c:forEach> ???</div></div> ?
WebSocket.java
package com.eshore.security.controller;import java.io.IOException;import java.io.UnsupportedEncodingException;import java.net.URLDecoder;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import java.util.Set;import java.util.concurrent.ConcurrentHashMap;import java.util.concurrent.ConcurrentMap;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 com.alibaba.fastjson.JSON;/** * webSocket * @author renb * @creatDate 2018年2月22日 */ // @ServerEndpoint 注解是一个类层次的注解，它的功能主要是将目前的类定义成一个websocket服务器端, // ??????????????注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端@ServerEndpoint("/websocket")public class WebSocket { ???// 静态变量，用来记录当前在线连接数。 ???private static int onlineCount = 0; ???// concurrent包的线程安全Map，用来存放每个客户端对应的回话信息。 ???private static ConcurrentMap<String, Session> webSocketMap = ????????????new ConcurrentHashMap<String, Session>(); ???private String userName; //当前用户 ???private String userId; //当前用户id，作为webSocketMap科key ???/** ????* 连接建立成功调用的方法 ????* ?????* @param session ????* ???????????可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据 ????*/ ???@OnOpen ???public void onOpen(Session session) { ???????String str = session.getQueryString(); //可以得到ws：//路径？后面的所有字符串 ?????????userName = str.split("&")[0].split("=")[1]; ????????userId = str.split("&")[1].split("=")[1]; ???????try { ???????????userName = URLDecoder.decode(userName, "utf-8"); ???????} catch (UnsupportedEncodingException e) { ???????????// TODO Auto-generated catch block ???????????e.printStackTrace(); ???????} ?????????webSocketMap.put(userId, session); // 加入map中 ???????addOnlineCount(); // 在线数加1 ???????System.out.println("有新连接加入！当前在线人数为" + getOnlineCount()); ???} ???/** ????* 连接关闭调用的方法 ????*/ ???@OnClose ???public void onClose() { ???????webSocketMap.remove(userId); // 从map中删除 ???????subOnlineCount(); // 在线数减1 ???????System.out.println("有一连接关闭！当前在线人数为" + getOnlineCount()); ???} ???/** ????* 收到客户端消息后调用的方法 ????* ?????* @param message ????* ???????????客户端发送过来的消息 ????* @param session ????* ???????????可选的参数 ????*/ ???@SuppressWarnings("rawtypes") ???@OnMessage ???public void onMessage(String message, Session session) { ???????System.out.println(userName + ":" + message); ???????Map maps = (Map) JSON.parse(message); ???????Map<String, String> resultMap = new HashMap<String, String>(); ???????for (Object map : maps.entrySet()) { ?????????????String ?key = (String) ((Map.Entry) map).getKey(); ???????????String value = (String) ((Map.Entry) map).getValue(); ???????????resultMap.put(key, value); ???????} ????????String msg = userName + ":" + resultMap.get("msg"); ???????String toUsers = resultMap.get("toUser"); ???????String fromUser = resultMap.get("fromUser"); ???????String[] users = toUsers.split("\\|"); ???????try { ???????????webSocketMap.get(fromUser).getBasicRemote().sendText(msg); ???????????Set<String> set = webSocketMap.keySet(); ???????????List<String> userList = new ArrayList<String>(); ???????????for (String str : set) { ???????????????userList.add(str); ???????????} ???????????if (users.length > 0) { ???????????????for (int i = 0; i < users.length; i++) { ???????????????????if (userList.contains(users[i])) { ???????????????????????webSocketMap.get(users[i]).getBasicRemote().sendText(msg); ???????????????????} ???????????????} ???????????} ???????} catch (IOException e) { ???????????e.printStackTrace(); ???????} ???} ???/** ????* 发生错误时调用 ????* ?????* @param session 会话 ????* @param error 异常 ????*/ ???@OnError ???public void onError(Session session, Throwable error) { ???????System.out.println("发生错误"); ???????error.printStackTrace(); ???} ??public static synchronized int getOnlineCount() { ???????return onlineCount; ???} ???/** ????* ?????* @creatUser renb ????* @creatDate 2018年2月22日 ????* ????*/ ???public static synchronized void addOnlineCount() { ???????WebSocket.onlineCount++; ???} ???/** ????* ?????* @creatUser renb ????* @creatDate 2018年2月22日 ????* ????*/ ???public static synchronized void subOnlineCount() { ???????WebSocket.onlineCount--; ???} ???}WebSocket前后端实现
原文地址：https://www.cnblogs.com/lovellll/p/10213901.html