网站建设定制开发WebSocket 消息推送

目录

一：SpringBoot网站建设定制开发后端建立服务器 

1.SpringBoot使用WebSocket准备

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

2.WebSocketConfig 注入ServerEndpointExporter 交给spring容器管理

  1. @Configuration
  2. public class WebSocketConfig {
  3.     @Bean
  4.     public ServerEndpointExporter serverEndpointExporter() {
  5.         return new ServerEndpointExporter();
  6.     }
  7. }

3.创建WebSocketServer实体类 添加 @ServerEndpoint注解 value 网站建设定制开发即是前端访问的接口

因为使用websocket网站建设定制开发的目的只是做，网站建设定制开发所以使用了set网站建设定制开发存储客户端的连接。如果是需要将消息推送给指定客户端，建议使用map或redis将客户端和session绑定存储。

我的代码如下

  1. @Slf4j
  2. //@ServerEndpoint("/api/websocket/{user}")   根据自己的需求选择合适的
  3. @ServerEndpoint(value = "/api/websocket")
  4. @Component
  5. public class WebSocketServer {
  6.  
  7.     private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>();
  8.  
  9. //    private static Map<String , Session> sessionMap = new ConcurrentHashMap<>();
  10.  
  11.     private Session session;
  12.  
  13.    // 连接建立成功调用的方法
  14.     @OnOpen
  15.     public void onOpen(Session session) {
  16.         this.session = session;
  17.         webSocketSet.add(this);
  18.         addOnlineCount();
  19.         try {
  20.             sendMessage("连接成功");
  21.         } catch (IOException e) {
  22.            e.printStackTrace();
  23.         }
  24.     }
  25.  
  26.     // 此方法是将用户与对应session绑定，用于推送消息给指定用户
  27.     //	@OnOpen
  28.     //	public void onOpen(@PathParam("user") String user, Session session) {
  29.     //		currentUser = user;
  30.     //		System.out.println("Connected ... " + session.getId());
  31.     //	}
  32.  
  33.     //连接关闭调用的方法
  34.     @OnClose
  35.     public void onClose() {
  36.         webSocketSet.remove(this);
  37.     }
  38.  
  39.  
  40.     //接收客户端消息
  41.     // @OnMessage
  42.     // public void onMessage(String message, Session session) {
  43.     //    log.info(message);
  44.     // }
  45.  
  46.     
  47.     //
  48.     @OnError
  49.     public void onError(Session session, Throwable error) {
  50.         log.error("发生错误");
  51.         error.printStackTrace();
  52.     }
  53.  
  54.  
  55.     public void sendMessage(String message) throws IOException {
  56.         this.session.getBasicRemote().sendText(message);
  57.     }
  58.  
  59.  
  60.     //将消息推送给所有客户端
  61.     public void sendInfo(String message) throws IOException {
  62.         log.info(message);
  63.         for (WebSocketServer item : webSocketSet) {
  64.             try {
  65.                 item.sendMessage(message);
  66.             } catch (IOException e) {
  67.                 continue;
  68.             }
  69.         }
  70.     }
  71. }

二：前端vue页面 使用echarts和WebSocket

        echarts的使用在此就不再赘述了，不了解的话，可以点击

        npm install -websocket 引入webcoket 

        main.js中引用

  1. import websocket from 'vue-native-websocket';
  2.  
  3. Vue.use(websocket, '', {
  4.     connectManually: true, // 手动连接
  5.     format: 'json', // json格式
  6.     reconnection: true, // 是否自动重连
  7.     reconnectionAttempts: 5, // 自动重连次数
  8.     reconnectionDelay: 2000, // 重连间隔时间
  9. });

        websocket的使用主要就是初始化一个websocket实例，定义连接路径即请求后端的接口路径，之后就是绑定该websocket的onopen，onerror，onmessage，onsend，onclose方法，知名见意分别是连接成功之后执行的方法（onopen），错误异常时执行（onerror），接收到后端推送的消息时（onmessage），前端向后端发送消息时（onsend），连接关闭时（onclose）。其中onsend，onclose未在代码中使用，其使用方法与其他方法类似，全部代码如下：

  1. <template>
  2. 	<div>
  3. 	<div id="chart" style="width: 700px; height: 200px;"></div>
  4. 	</div>
  5. </template>
  6.  
  7. <script>
  8. 	export default{
  9. 		name:"chart",
  10. 		data(){
  11. 			return{
  12. 				scoket:'',
  13. 				yAxis:[],
  14. 				xAxis:[],
  15. 			}
  16. 		},
  17. 		mounted() {
  18. 			this.chart();
  19. 			this.init();
  20. 		},
  21. 		methods:{
  22.            //初始化websocket实例
  23.           init: function () {
  24.             if(typeof(WebSocket) === "undefined"){
  25.               alert("您的浏览器不支持socket")
  26.             }else{
  27.               // 实例化socket
  28.               this.socket = new WebSocket("ws://192.168.1.21:8082/api/websocket")
  29.               // 监听socket连接
  30.               this.socket.onopen = this.open
  31.                 // 监听socket错误信息
  32.               this.socket.onerror = this.error
  33.               // 监听socket消息
  34.               this.socket.onmessage = this.getMessage
  35.             }
  36.           },
  37.           open: function () {
  38.             console.log("socket连接成功")
  39.           },
  40.           error: function () {
  41.             console.log("连接错误")
  42.           },
  43.         //接收服务器发来的消息
  44.          getMessage: function (e) {
  45.             console.log(e.data);
  46.             this.xAxis = JSON.parse(e.data).xAxis;
  47.             this.yAxis = JSON.parse(e.data).yAxis;
  48.             this.chart();
  49.           },
  50.           //给服务器发消息的方法
  51.           send: function () {
  52.             this.socket.send(this.parms);
  53.           },
  54.           close: function () {
  55.             console.log("socket已经关闭")
  56.           },
  57.           chart(){
  58.          //有的话就获取已有echarts实例的DOM节点。
  59.       var mychart = this.$echarts.getInstanceByDom(document.getElementById('timechart')); 
  60.              if (mychart == null) { // 如果不存在，就进行初始化。
  61.                  mychart = this.$echarts.init(document.getElementById('chart'));
  62.              }
  63.         var option = {
  64.           title: {
  65.             text: '时间(ms)/阶段'
  66.           },
  67.           tooltip: {
  68.             trigger: 'axis'
  69.           },
  70.           legend: {
  71.             // data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  72.           },
  73.           grid: {
  74.             left: '3%',
  75.             right: '4%',
  76.             bottom: '3%',
  77.             containLabel: true
  78.           },
  79.           toolbox: {
  80.             feature: {
  81.               saveAsImage: {}
  82.             }
  83.           },
  84.           xAxis: {
  85.             type: 'category',
  86.             boundaryGap: false,
  87.             data: this.xAxis
  88.           },
  89.           yAxis: {
  90.             type: 'value'
  91.           },
  92.           series: [
  93.             {
  94.               type: 'line',
  95.               stack: 'Total',
  96.               data: this.yAxis
  97.             }
  98.           ]
  99.         };
  100.         mychart.setOption(option);
  101.       }
  102.     
  103. 	}
  104. </script>
  105.  
  106. <style>
  107. </style>

三：服务端给客户端推送消息

springboot中使用@Autowired注入WebSocketServer

  1. @Autowired
  2. private WebSocketServer webSocketServer;

需要发消息时  

 webSocketServer.sendInfo(JSONObject.toJSONString(chartValue));

四：注意

在发送信息的时候，建议转成JSON格式

 客户端接收的时候要转换一下

根据个人习惯，echarts根据数据更新自动刷新，我喜欢这样写，图表不更新的时候可以尝试一下

获取到服务器的数据之后

在检查中会有json异常错误，不影响

这样写websocket是在该页面实例化一个websocket，每次刷新页面或者重新进入该页面都会新建一个websocket实例，在真实业务中很少会这样处理。所以就需要将websocket定义为全局实例，跟随vue实例的创建而创建，销毁而销毁。

需要vue使用全局websocket的朋友，可以移步 。

 如果你恰好需要读到这篇文章，希望对你有帮助。如有写的不对或不够好的地方，欢迎指正。

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发