Welcome

欢迎

最近做了一个SpringBoot的项目，被SpringBoot那简介的配置所迷住。刚好项目中，用到了websocket。于是，我就想着，做一个SpringBoot+websocket简单的网页聊天Demo。

当然，项目很简单，没什么代码，一眼就能明白

导入websocket的包。

通过使用SpringBoot导入包的时候，我们可以发现，很多包都是以 spring-boot-starter 开头的，对于我这种强迫症 ，简直是福音

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

配置websocket

服务端

首先新建一个WebSocketConfig的类，添加 @Component 注解 注入一个bean

@Component
public class WebSocketConfig {

    @Bean
    public ServerEndpointExporter serverEndpointExporter() {

        return new ServerEndpointExporter();
    }
}

新建一个service，本来觉得是新建一个控制器，但是我觉得这也不是控制器，但是也不太是service。最后还是选择新建一个servece。这里你如果有更好的想法可以按照你的来。

这个service里面有4个方法，这些方法很简单，通过名称就可以看出是什么意思。

@Component
@ServerEndpoint("/webSocket")
@Slf4j
public class WebSocket {

    private Session session;

    private static CopyOnWriteArraySet<WebSocket> webSockets = new CopyOnWriteArraySet<>();

    private MessageVO messageVO = new MessageVO();

    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        webSockets.add(this);


        messageVO.setType(1);
        messageVO.setUserNum(webSockets.size());
        messageVO.setMessage("有新的连接");

        ObjectMapper mapper = new ObjectMapper();

        String Json = "";
        try {
            Json = mapper.writeValueAsString(messageVO);
        } catch (Exception ex) {
            log.error(ex.getMessage());
        }

        this.sendMessage(Json);
        log.info("【websocket消息】有新的连接, 总数:{}", webSockets.size());
    }


    @OnClose
    public void onClose() {
        webSockets.remove(this);

        messageVO.setType(2);
        messageVO.setUserNum(webSockets.size());
        messageVO.setMessage("有用户离开");

        ObjectMapper mapper = new ObjectMapper();

        String Json = "";
        try {
            Json = mapper.writeValueAsString(messageVO);
        } catch (Exception ex) {
            log.error(ex.getMessage());
        }

        this.sendMessage(Json);


        log.info("【websocket消息】连接断开, 总数:{}", webSockets.size());
    }

    @OnMessage
    public void onMessage(String message) {

        messageVO.setType(3);
        messageVO.setUserNum(webSockets.size());
        messageVO.setMessage(message);

        ObjectMapper mapper = new ObjectMapper();

        String Json = "";
        try {
            Json = mapper.writeValueAsString(messageVO);
        } catch (Exception ex) {
            log.error(ex.getMessage());
        }

        this.sendMessage(Json);

        log.info("【websocket消息】收到客户端发来的消息:{}", message);
    }

    public void sendMessage(String message) {
        for (WebSocket webSocket : webSockets) {
            log.info("【websocket消息】广播消息, message={}", message);
            try {
                webSocket.session.getBasicRemote().sendText(message);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
}

客户端

客户端也就是我们的html，我用的是原生html5的websocket ,不需要其他的js。直接在html中写js就可以

<script type="application/javascript">
    var websocket = null;
    var cahtNum = $('.chat-num').text();
    if ('WebSocket' in window) {
        websocket = new WebSocket('ws://localhost:8080/chat/webSocket');

    } else {
        alert('该浏览器不支持websocket');
    }

    websocket.onopen = function (event) {
        console.log('websocket建立连接');
    }

    websocket.onclose = function (event) {
        console.log('websocket关闭连接');
    }

    websocket.onmessage = function (event) {
        console.log('websocket收到消息' + event.data);
        var result = $.parseJSON(event.data);
        if (result.type == 3) {
            var element = document.getElementById('message-template').innerHTML;
            $('.message-container').append(element);
            $(".message-content:last").html(result.message);
        }
        else {
            $('.chat-num').text(result.userNum);
        }

    }

    websocket.onerror = function (event) {
        console.log('websocket通信发生错误');

    }

    window.onbeforeunload = function (event) {
        websocket.close();
    }

    $('.send-message').click(function () {
        var message = $('.chat-message').val();
        if (message == "") {
            mdui.alert('请输入要发送的消息');
            return;
        }
        sendmessage(message);
        $('.chat-message').val("");
    })

    function sendmessage(message) {
        websocket.send(message);
    }
</script>

这个就是全都的功能，非常简单，没什么特别的功能和代码。

最后附上Github的源代码 传送门

ldlood
2017年8月20日