前端页面

<%@ 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>
    <%@ include file="../../view/template_meta.jsp" %>
    <%@ include file="../../view/template_css.jsp" %>
    <%@ include file="../../view/template_js.jsp" %>
</head>
<body>
<%@ include file="../../view/template_menu.jsp" %>

<div id="page-wrapper" class="gray-bg">
    <%@ include file="../../view/template_header.jsp" %>

    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        班次: <input id="routeId" >
                        用户名: <input id="username">
                        <input type="button" value="登录" onclick="login()" />
                        <br>
                        <br>


                        <textarea id="msg" placeholder="格式:@xxx#消息 , 或者@ALL#消息" style="width: 500px;height: 50px"></textarea>
                        <input type="button" onclick="sendText()" value="发送消息"> <br>
                        <textarea id="history" style="width: 500px;height: 200px ; max-lines: 10"></textarea>

                        <br/>
                        <br/>
                        <input type="file" id="file" />
                        <input type="button" onclick="sendFile()" value="发送文JIAN"> <br>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>

<script src="../script/js/view/websocket/index.js"></script>
</html>

JS

var socket;

//登录过后初始化socket连接
function login() {
    var userId = $('#username').val();
    var routeId = $('#routeId').val();
    if (typeof(WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    } else {
        console.log("您的浏览器支持WebSocket/websocket");
    }
    //socket连接地址: 注意是ws协议
    socket = new WebSocket("ws://192.168.1.102:9999/xxx/websocket/" + routeId + "/" + userId);

    socket.onopen = function () {
        console.log("Socket 已打开");
    };
    //获得消息事件
    socket.onmessage = function (msg) {
        var histroy = $("#history").val();
        $("#history").val(histroy + "\r\n" + msg.data);
        console.log($(msg));
    };
    //关闭事件
    socket.onclose = function () {
        console.log("Socket已关闭");
    };
    //错误事件
    socket.onerror = function () {
        alert("Socket发生了错误");
    }
    $(window).unload(function () {
        socket.close();
    });
}

//点击按钮发送消息
function sendText() {
    var message = {
        type: 0,
        content: $("#msg").val()
    };
    socket.send(JSON.stringify(message));
}

后台代码

public class WebSocketMessage {

    private Integer type; //0.text  1.picture  2.volumn
    private String content;
    private String userId;

    public String getUserId() {
        return userId;
    }

    public void setUserId(String userId) {
        this.userId = userId;
    }

    public Integer getType() {
        return type;
    }

    public void setType(Integer type) {
        this.type = type;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }
}

import com.gexin.fastjson.JSON;
import org.apache.commons.lang3.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.io.InputStream;
import java.net.URLEncoder;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

@ServerEndpoint("/websocket/{routeId}/{userId}")
@Component
public class WebSocketServer {

    public final static Logger logger = LoggerFactory.getLogger(WebSocketServer.class);


    private final static Map<String, Map<String, WebSocketServer>> connectionMap = new ConcurrentHashMap<>();

    private Session session;
    private String userId;
    private String routeId;

    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("routeId") String routeId, @PathParam("userId") String userId) throws IOException {

        if (!connectionMap.containsKey(routeId)) {
            connectionMap.put(routeId, new ConcurrentHashMap<>());
        }
        connectionMap.get(routeId).put(userId, this);
        this.session = session;
        this.userId = userId;
        this.routeId = routeId;

        logger.info("连接成功:routeId:{} userId:{}", routeId, userId);
        sendMessage(this.userId, "加入聊天", 0);

    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() throws IOException {
        sendMessage(this.userId, "已退出聊天", 0);

        if (!connectionMap.containsKey(routeId)) {
            logger.info("线路{}聊天不存在.");
            return;
        }

        if (!connectionMap.get(routeId).containsKey(userId)) {
            logger.info("{}已退出线路{}聊天.", userId, routeId);
            return;
        }

        connectionMap.get(routeId).remove(userId);
        logger.info("关闭连接成功");

    }

    /**
     * 收到客户端消息后触发的方法
     */
    @OnMessage
    public void onMessage(String message) throws IOException {

        WebSocketMessage messageObj = JSON.parseObject(message, WebSocketMessage.class);
        sendMessage(this.userId, messageObj.getContent(), messageObj.getType());
    }

    private void sendMessage(String userId, String content, Integer type) throws IOException {
        Map<String, WebSocketServer> passengers = connectionMap.get(routeId);
        if (passengers.size() == 0) {
            return;
        }

        WebSocketMessage returnMsg = new WebSocketMessage();
        returnMsg.setUserId(userId);
        returnMsg.setContent(content);
        returnMsg.setType(type);
        String jsonStr = JSON.toJSONString(returnMsg);

        for (Map.Entry<String, WebSocketServer> entry : passengers.entrySet()) {
            entry.getValue().session.getBasicRemote().sendText(jsonStr);
        }
    }

    @OnError
    public void onError(Session session, Throwable error) {
        error.printStackTrace();
    }

}

WebSocket 聊天

WebSocket 聊天

前端页面

JS

后台代码