如何使用websocket实现前后端通信

x33g5p2x  于2022-02-28 转载在 其他  
字(1.9k)|赞(0)|评价(0)|浏览(384)

如何使用websocket实现前后端通信

websocket通信是很好玩的,也很有用的的通信方式,使用方式如下:

第一步由于springboot很好地集成了websocket,所以先在在pom.xml文件中引入依赖

  1. <dependency>
  2. <groupId>org.springframework.boot</groupId>
  3. <artifactId>spring-boot-starter-websocket</artifactId>
  4. </dependency>

第二步在前端界面使用websocket,也就是HTML文件中编写

  1. <script>
  2. var websocket = null;
  3. if('WebSocket' in window) {
  4. websocket = new WebSocket('ws://yesell.natapp1.cc/sell/webSocket');
  5. }else {
  6. alert('该浏览器不支持websocket!');
  7. }
  8. websocket.onopen = function (event) {
  9. console.log('建立连接');
  10. }
  11. websocket.onclose = function (event) {
  12. console.log('连接关闭');
  13. }
  14. websocket.onmessage = function (event) {
  15. console.log('收到消息:' + event.data)
  16. //所要执行的操作
  17. }
  18. websocket.onerror = function () {
  19. alert('websocket通信发生错误!');
  20. }
  21. window.onbeforeunload = function () {
  22. websocket.close();
  23. }
  24. </script>

第三步,一般我们是在controller层实现交互的,然而websocket的交互是在service层,

其中:

  1. @ServerEndpoint("/webSocket")是定义了交互的地址
  2. @Slf4j
  3. @OnOpen@OnClose@OnMessage这三个方法与前端的三个同名方法相互交互,在需要使用的位置调用方法如下,
  4. 到这里基本写完了。
  5. ======================================================================================
  6. @Component
  7. @ServerEndpoint("/webSocket")
  8. @Slf4j
  9. public class WebSocket {
  10. private Session session;
  11. private static CopyOnWriteArraySet<WebSocket> webSocketSet=new CopyOnWriteArraySet<>();
  12. @OnOpen
  13. public void onOpen(Session session){
  14. this.session=session;
  15. webSocketSet.add(this);
  16. log.info("【websocket消息】有新的连接,总数:{}",webSocketSet.size());
  17. }
  18. @OnClose
  19. public void onClose(){
  20. webSocketSet.remove(this);
  21. log.info("【websocket消息】连接断开,总数:{}",webSocketSet.size());
  22. }
  23. @OnMessage
  24. public void onMessage(String message){
  25. log.info("【websocket消息】收到客户端发来的消息:{}",message);
  26. }
  27. public void sendMessage(String message){
  28. for(WebSocket webSocket:webSocketSet){
  29. log.info("【websocket消息】广播消息:{}",message);
  30. try {
  31. webSocket.session.getBasicRemote().sendText(message);
  32. } catch (IOException e) {
  33. e.printStackTrace();
  34. }
  35. }
  36. }
  37. }

使用方式:

  1. @Autowired
  2. private WebSocket webSocket;
  3. webSocket.sendMessage("传递的参数");

相关文章