• websocket基础

     

    下面就以代码来进行说明

    1，先导入websocket依赖

    1.         
    2.             org.springframework.boot
    3.             spring-boot-starter-websocket
    4.

    2.编写websocket相关bean管理配置

    1. @Configuration
    2. public class config {
    3.     //申明websocket是由bean管理的
    4.     @Bean
    5.     public ServerEndpointExporter serverEndpointExporter() {
    6.         return new ServerEndpointExporter();
    7.     }
    8. }

    3.编写业务层代码

    1. @ServerEndpoint("/api/{user_id}")
    2. @Component
    3. public class servlet {
    4.  
    5.     private  String id;
    6.     //客户端建立
    7.     @OnOpen
    8.     public  void  onopen(Session  session,  @PathParam("user_id")String id){
    9.         this.id=id;
    10.         try {
    11.             session.getBasicRemote().sendText("连接建立成功");
    12.         } catch (IOException e) {
    13.             throw new RuntimeException(e);
    14.         }
    15.         System.out.println("连接建立");
    16.     }
    17.    //客户端发送消息，服务端接受
    18.     @OnMessage
    19.     public  void  onoMessage(String  message,  Session session){
    20.         System.out.println(message);
    21.         try {
    22.             //向客户端返还信息
    23.             session.getBasicRemote().sendText("消息收到");
    24.         } catch (IOException e) {
    25.             throw new RuntimeException(e);
    26.         }
    27.     }
    28.     //客户端关闭时候
    29.     @OnClose
    30.     public  void  onoClose(Session  session,  @PathParam("user_id")String id){
    31.         this.id=id;
    32.         System.out.println("连接关闭");
    33.     }
    34. }

    注意@ServerEndpoint("/api/{user_id}")此注解供websocket提供访问连接url

    4.附赠前端代码一份

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport"
    6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12. <input id="input"  type="text" placeholder="输入你的内容">
    13. <button id="but">发送请求button>
    14. <div id="div1" style="width: 200px;height: 200px; background:yellow;">div>
    15. <script>
    16.     let input = document.getElementById("input");
    17.     let but = document.getElementById("but");
    18.     let div1 = document.getElementById("div1");
    19.      //参数1：websocket服务地址
    20.       var socket=new WebSocket("ws://localhost:8080/api/1");
    21.       //open:当websocket服务连接成功
    22.       socket.addEventListener("open",function (){
    23.            div1.innerHTML="连接服务成功了"
    24.           //客户端发送消息
    25.           socket.send("发送成功")
    26.       })
    27.     //message:接受客户端的信息
    28.     socket.addEventListener("message",function (re){
    29.         console.log(re.data)
    30.  
    31.     })
    32.     //客户端关闭时
    33.     socket.addEventListener("close",function (){
    34.          div1.innerHTML="我已经离开了"
    35.     })
    36. script>
    37. body>
    38. html>

    5.代码一些关键解析

  • 相关阅读:
    高空简易水果采摘装置设计（CAD+proe）
    时钟轮在 RPC 中的应用
    Fusion Compute网络虚拟化
    多系统-单点登录测试
    前端vue路由模块拆分归类【理解版】
    人机智能的逻辑哲学论
    java计算机毕业设计智慧校园系统后端源码+mysql数据库+系统+lw文档+部署
    MATLAB视频图像去雾处理（GUI，论文，注释）
    Request & Response
    mysql [Err] 1118 - Row size too large (＞ 8126).
  • 原文地址：https://blog.csdn.net/weixin_62907807/article/details/132487871