玩转springboot2.x之整合webSocket篇

最新推荐文章于 2024-05-22 22:13:13 发布

wuyongde0922

最新推荐文章于 2024-05-22 22:13:13 发布

阅读量2.7k

点赞数

分类专栏： html/css/javascript

原文链接：https://blog.csdn.net/ljk126wy/article/details/82814086

版权

html/css/javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ljk126wy/article/details/82814086

关于webSocket是什么我在这里不做过多的阐述请参看文档：https://www.cnblogs.com/fuqiang88/p/5956363.html进行了解

我们直接进入实在代码让你来感受他是个什么东东。

首先第一步需要我们引入websocket的依赖

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

如果使用外置的tomcat 需要引入javaee-api 我们这里不引入是因为我们使用的是内置的tomcat,spring-boot 内置tomcat 包含拉javaee-api 。

第二步配置webSocket 配置信息也就是配置webSocket 服务端点

    package cn.lijunkui.springbootlearn.socket.config;

    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.stereotype.Component;
    import org.springframework.web.socket.server.standard.ServerEndpointExporter;

    import javax.websocket.server.ServerEndpoint;

    @Configuration
    public class WebSocketConfig {
        @Bean
        public ServerEndpointExporter serverEndpointExporter(){
            return new ServerEndpointExporter();
        }
    }

第三步开发接受和处理消息的处理类

    package cn.lijunkui.springbootlearn.socket;

    import org.springframework.stereotype.Controller;

    import javax.websocket.*;
    import javax.websocket.server.ServerEndpoint;
    import java.io.IOException;
    import java.util.concurrent.CopyOnWriteArraySet;

    @Controller
    @ServerEndpoint("/websocket")
    public class Socket {
        /*websocket 客户端会话通过Session 向客户端发送数据*/
        private Session session;
        /*线程安全set 存放每个客户端处理消息的对象*/
        private static CopyOnWriteArraySet<Socket> webSocketSet = new CopyOnWriteArraySet();
        /*websocket 连接建立成功后进行调用*/
        @OnOpen
        public void onOpen(Session session) {
            this.session = session;
            webSocketSet.add(this);
            System.out.println("websocket 有新的链接"+webSocketSet.size());
        }
        /*websocket 链接关闭调用的方法*/
        @OnClose
        public void onClose() {
            webSocketSet.remove(this);
        }
        /*收到客户端消息后调用的方法*/
        @OnMessage
        public void onMessage(String message) throws IOException {
            for (Socket socket : webSocketSet) {
                socket.session.getBasicRemote().sendText("自己嘎给自己嘎发的消息："+message);
            }
        }
        /*websocket 发生错误时进行调用*/
        @OnError
        public void onError(Session session,Throwable error){
            error.printStackTrace();
        }
        public void sendMessage(String message) throws IOException {
            for (Socket socket : webSocketSet) {
                socket.session.getBasicRemote().sendText(message);
            }
        }
        public Session getSession() {
            return session;
        }
        public void setSession(Session session) {
            this.session = session;
        }
    }

第四部编写客户端访问页面 socket.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>socket demo</title>
    </head>
    <body>
        <h2>学说话的tom 猫</h2>
        <div><label>消息内容：</label><p id="serverMessage"></p></div>
        <div><label>我对自己说：</label><input id="sendMessage" type="text" />    <button οnclick="send()">发送</button></div>

    <script type="text/javascript">

        var websocket = null;
        if('WebSocket' in window){
            websocket = new WebSocket('ws://localhost:8080/bootlearn/websocket');
        }else{
            alert("该游览器不知此WebSocket");
        }
        //websocket 链接成功后进行触发
        websocket.onopen = function (event){
            console.log("建立链接。。。。");
        }
        //websocket 链接关闭的进行触发
        websocket.onclose = function (event){
            console.log("关闭链接。。。。");
        }
        //接收到消息的进行触发
        websocket.onmessage = function(event){
            var serverMessage = document.getElementById("serverMessage");
            serverMessage.innerHTML= event.data;
            console.log("收到消息");
        }

        //连接发生错误的进行触发
        websocket.onerror = function(evt)
        {
            console.log("WebSocketError!");
        }
        //当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function (){
            websocket.close();
        }
        //关闭websocket连接
        function closeWebSocket(){
            websocket.close();
        }
        //发送消息
        function send(){
            var sendIput = document.getElementById("sendMessage");
            var sendMessage = sendIput.value;
            if(sendMessage.trim() == ""){
                alert("请输入发送消息！")
                return;
            }
            websocket.send(sendMessage);
        }

    </script>
    </body>
    </html>

第五步编写通过后台发送消息的Controller

    package cn.lijunkui.springbootlearn.socket;

    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;

    import java.io.IOException;

    @RestController
    @RequestMapping("socket")
    public class SocketTestController {
        @Autowired
        private Socket socket;
        @GetMapping("/{message}")
        public void sendMessage(@PathVariable("message") String message) throws IOException {
            socket.sendMessage("这个是controller 发送的消息："+message);
        }
    }

第六步编写通过后台进行消息的发送controllerTest.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h2>通过controller 进行发送消息</h2>
    <input type="text" id="sendMessage"><button οnclick="controllerSend()">发送</button>
    </body>
    <script language="JavaScript">
        function controllerSend(){
            var sendIput = document.getElementById("sendMessage");
            var sendMessage = sendIput.value;
            if(sendMessage.trim() == ""){
                alert("请输入发送消息！")
                return;
            }
            //创建异步对象
            var xhr = new XMLHttpRequest();
            //设置请求的类型及url
            xhr.open('get', 'http://localhost:8080/bootlearn/socket/'+sendMessage );
            //发送请求
            xhr.send();
            xhr.onreadystatechange = function () {
                // 这步为判断服务器是否正确响应
                if (xhr.readyState == 4 && xhr.status == 200) {
                    console.log(xhr.responseText);
                }
            };
        }
    </script>
    </html>

好啦代码部分编写完毕接下来我们开始进行测试

启动springBoot

第二步打开游览器访问socket.html

发送消息：

访问controller 发送测试页面

发送消息

---------------------
版权声明：本文为CSDN博主「IT乌托邦-桌前明月」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/ljk126wy/article/details/82814086

wuyongde0922

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
玩转springboot2.x之整合webSocket篇

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/ljk126wy/article/details/82814086关于webSocket是什么我在这里不做过多的阐述请参看文档：https://www.cnblogs.com/fuqiang88/p/5956363.html进行了解...
复制链接

扫一扫

专栏目录