WebSocket前后端实现

Posted 2021-01-31 lovollll

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}"; 

//判断浏览器是否支持websocket
if(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--;
    }

    
}