html 自动连接websocket_玩转springboot2.x之整合webSocket篇

最新推荐文章于 2021-08-10 11:58:44 发布

weixin_39947521

最新推荐文章于 2021-08-10 11:58:44 发布

阅读量117

点赞数

作者丨桌前明月

来源丨Java学习之道

原文地址

https://zhuoqianmingyue.blog.csdn.net/article/details/82814086

关于webSocket是什么我在这里不做过多的阐述，如需了解更多，请参看文档： https://www.cnblogs.com/fuqiang88/p/5956363.html 进行了解。接下来，我们直接进入实战代码让你来感受它是个什么东东。直接上手操作

第一步、需要我们引入websocket的依赖：

<dependency><groupId>org.springframework.bootgroupId><artifactId>spring-boot-starter-websocketartifactId>dependency>

如果使用外置的tomcat 需要引入javaee-api 我们这里不引入是因为我们使用的是内置的tomcat,spring-boot 内置tomcat 包含拉javaee-api 。第二步、配置webSocket 配置信息，也就是配置webSocket 服务端点：

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();
    }
}

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

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 webSocketSet = new CopyOnWriteArraySet();/*websocket 连接建立成功后进行调用*/@OnOpenpublic void onOpen(Session session) {this.session = session;
        webSocketSet.add(this);
        System.out.println("websocket 有新的链接"+webSocketSet.size());
    }/*websocket 链接关闭调用的方法*/@OnClosepublic void onClose() {
        webSocketSet.remove(this);
    }/*收到客户端消息后调用的方法*/@OnMessagepublic void onMessage(String message) throws IOException {for (Socket socket : webSocketSet) {
            socket.session.getBasicRemote().sendText("自己嘎给自己嘎发的消息："+message);
        }
    }/*websocket 发生错误时进行调用*/@OnErrorpublic 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

html><html lang="en"><head><meta charset="UTF-8"><title>socket demotitle>head><body><h2>学说话的tom 猫h2><div><label>消息内容：label><p id="serverMessage">p>div><div><label>我对自己说：label><input id="sendMessage" type="text" />    <button onclick="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

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 {@Autowiredprivate Socket socket;@GetMapping("/{message}")public void sendMessage(@PathVariable("message") String message) throws IOException {
        socket.sendMessage("这个是controller 发送的消息："+message);
    }
}

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

html><html lang="en"><head><meta charset="UTF-8"><title>Titletitle>head><body><h2>通过controller 进行发送消息h2><input type="text" id="sendMessage"><button onclick="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 发送测试页面

发送消息：

近期精彩内容推荐：

程序员这碗青春饭，怎么吃得更久一点？

顺丰小哥连升3级，国家授予特别奖！

狠人 Spring Cloud 20000 字总结！

python实现文件自动归类

在看点这里好文分享给更多人↓↓

weixin_39947521

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html 自动连接websocket_玩转springboot2.x之整合webSocket篇

作者丨桌前明月来源丨Java学习之道原文地址https://zhuoqianmingyue.blog.csdn.net/article/details/82814086关于webSocket是什么我在这里不做过多的阐述，如需了解更多，请参看文档：https://www.cnblogs.com/fuqiang88/p/5956363.html进行了解。接下来，我们直接进入实战代码让你来感...
复制链接

扫一扫

html 自动连接websocket_玩转springboot2.x之整合webSocket篇

“相关推荐”对你有帮助么？