Spring集成websocket全流程

因为我们是spring+mvc的项目所以还是需要websocket的maven配置

        <!-- WebSocket配置开始-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-websocket</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-messaging</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>javax.websocket</groupId>
            <artifactId>javax.websocket-api</artifactId>
            <version>1.0</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.3.1</version>
        </dependency>
        <!-- WebSocket配置结束-->

maven配置完成。注意spring.version得是4.0以上版本的

接下来这里我用的是配置文件配置websocket

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:websocket="http://www.springframework.org/schema/websocket"
       xsi:schemaLocation="
       http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
       http://www.springframework.org/schema/websocket
       http://www.springframework.org/schema/websocket/spring-websocket-4.0.xsd">

    <bean id="websocket" class="com.lg.webapi.websocket.WebSocketService" />
    //这个是你的websocket服务,文件路径用你自己的

    <!--<websocket:handlers>-->
        <!--<websocket:mapping path="/websocket" handler="websocket" />-->
        <!--<websocket:handshake-interceptors>-->
            <!--<bean class="com.lg.webapi.handle.MyHandshakeInterceptor" />-->
        <!--</websocket:handshake-interceptors>-->
    <!--</websocket:handlers>-->
    //这里我去掉了拦截器
</beans>

ok配置完了。然后引入到spring的配置文件里

首先在spring的配置文件顶部加入

xmlns:websocket="http://www.springframework.org/schema/websocket"

然后引入

<import resource="spring-websocket.xml"/>

上面两步就完成了，然后编写websocketService，这个服务是基于我的需求来的，你们自己改自己的需求，但是大体逻辑是不变的。@ServerEndpoint("/websocket/chat/{roomName}/{userName}")这个就相当于controller中的reqestMapping。后面就是请求这个url然后就能通讯了

/**
 * @author fish
 */
@ServerEndpoint("/websocket/chat/{roomName}/{userName}")
public class WebSocketService{

    private static final Logger logger = Logger.getLogger(WebSocketService.class);

    // 使用map来收集session，key为roomName，value为同一个房间的用户集合
    // concurrentMap的key不存在时报错，不是返回null
    private static final Map<String, Set<Session>> rooms = new ConcurrentHashMap();
    private static final Map<String, String> userNameList = new ConcurrentHashMap();

    @OnOpen
    public void connect(@PathParam("roomName") String roomName, @PathParam("userName") String userName, Session session) throws Exception {
        // 将session按照房间名来存储，将各个房间的用户隔离
        if (!rooms.containsKey(roomName)) {
            // 创建房间不存在时，创建房间
            Set<Session> room = new HashSet<Session>();
            // 添加用户
            room.add(session);

            rooms.put(roomName, room);
        } else {
            // 房间已存在，直接添加用户到相应的房间
            rooms.get(roomName).add(session);
        }
        System.err.println("userName"+userName);
        System.out.println("a client has connected!");
    }

    @OnClose
    public void disConnect(@PathParam("roomName") String roomName,@PathParam("userName") String userName, Session session) {
        rooms.get(roomName).remove(session);
        System.out.println("a client has disconnected!");
    }

    @OnMessage
    public void receiveMsg(@PathParam("roomName") String roomName,@PathParam("userName") String userName,
                           String msg, Session session) throws Exception {
        // 此处应该有html过滤
        msg = userName + ":" + msg;
        // 接收到信息后进行广播
        broadcast(roomName, msg);
    }

    // 按照房间名进行广播
    public static void broadcast(String roomName, String msg) throws Exception {
        for (Session session : rooms.get(roomName)) {
            session.getBasicRemote().sendText(msg);
        }
    }

}

到这一步服务端的工作基本完成了。然后编写一个前端页面测试一下

注意 websocket = new WebSocket("ws://127.0.0.1:8088/app/websocket/chat/房间号/用户昵称"); 这行代码根据你自己的项目地址修改。

<%@ page language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>index Page</title>
</head>
<body>
Welcome<br/><input id="text" type="text"/>
<button onclick="send()">发送消息</button>
<hr/>
<button onclick="closeWebSocket()">关闭WebSocket连接</button>
<hr/>
<div id="message"></div>
<table id="tb" class="altrowstable">
    <th align="center"  colspan="9">实时信息监控</th>
</table>
</body>

<script type="text/javascript">
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://127.0.0.1:8088/app/websocket/chat/房间1/啦啦啦");
    }
    else {
        alert('当前浏览器 Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("WebSocket连接发生错误");
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
        setMessageInnerHTML("WebSocket连接成功");
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("WebSocket连接关闭");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        var msg=innerHTML.split(" - ")

        var table=document.getElementById("tb");

        var row;
        row=table.insertRow(1);
        for(var i=0;i<msg.length;i++){
            var cell = row.insertCell(i);
            cell.appendChild(document.createTextNode(msg[i]));
        }
        if(table.rows.length>50){
            table.deleteRow(table.rows.length-1);
        }
        //  document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        websocket.send(message);
    }
</script>
</html>

好了一个websocket就配置完成了