devbox
码创造者
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

React+SpringBoot通过WebSocket实时统计在线人数_webscoket 统计在线人数

作者：码创造者 | 2024-06-30 00:17:13

赞

踩

webscoket 统计在线人数

一、基本概念

WebSocket 是一种网络通信协议，如果服务器有连续的状态变化，客户端要获知就非常麻烦。大多数 Web 应用程序将通过频繁的异步请求实现长轮询。轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）所以这里使用WebSocket 通过登录后跳转到首页，向后台WebSocket 建立长链接来达到"即使通讯"，随着用户页面打开或关闭后台群发消息来实时更改页面显示的人数，当然这里目前不涉及登录后的上线下线以及帐号登录挤掉功能，如果需要可以通过发送消息来改变。

二、SpringBoot 后台实现WebSocket

pom.xml

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

WebSocketConfig.java

  1. package com.kero99.socket;
  2. import org.springframework.context.annotation.Bean;
  3. import org.springframework.context.annotation.Configuration;
  4. import org.springframework.web.socket.server.standard.ServerEndpointExporter;
  5. /**
  6.  * 开启WebSocket支持
  7.  * @author ygc
  8.  */
  9. @Configuration  
  10. public class WebSocketConfig {  
  11.     @Bean  
  12.     public ServerEndpointExporter serverEndpointExporter() {  
  13.         return new ServerEndpointExporter();  
  14.     }  
  15. }

WebSocketController.java

  1. package com.kero99.socket;
  2.  
  3.  
  4. import java.io.IOException;
  5.  
  6. import org.springframework.web.bind.annotation.RequestMapping;
  7. import org.springframework.web.bind.annotation.RequestMethod;
  8. import org.springframework.web.bind.annotation.RequestParam;
  9. import org.springframework.web.bind.annotation.RestController;
  10.  
  11. /**
  12.  * WebSocket服务器端推送消息示例Controller
  13.  * 
  14.  * @author ygc
  15.  *
  16.  */
  17. @RestController
  18. @RequestMapping("/scoket")
  19. public class WebSocketController {
  20. //	@Autowired
  21. //	private RedisOperator redisOperator;
  22. 	@RequestMapping(value="/sendAll", method=RequestMethod.GET)
  23. 	/**
  24. 	 * 群发消息内容
  25. 	 * @param message
  26. 	 * @return
  27. 	 */
  28. 	String sendAllMessage(@RequestParam(required=true) String message){
  29. 		try {
  30. 			WebSocketServer.BroadCastInfo(message);
  31. 		} catch (IOException e) {
  32. 			e.printStackTrace();
  33. 		}
  34. 		return "ok";
  35. 	}
  36. 	@RequestMapping(value="/sendOne", method=RequestMethod.GET)
  37. 	/**
  38. 	 * 指定会话ID发消息
  39. 	 * @param message 消息内容
  40. 	 * @param id 连接会话ID
  41. 	 * @return
  42. 	 */
  43. 	String sendOneMessage(@RequestParam(required=true) String message,@RequestParam(required=true) String id){
  44. 		try {
  45. 			WebSocketServer.SendMessage(id,message);
  46. 		} catch (IOException e) {
  47. 			e.printStackTrace();
  48. 		}
  49. 		return "ok";
  50. 	}
  51. }

WebSocketServer.java

  1. package com.kero99.socket;
  2.  
  3. import java.io.IOException;
  4. import java.util.concurrent.CopyOnWriteArraySet;
  5. import java.util.concurrent.atomic.AtomicInteger;
  6.  
  7. import javax.websocket.OnClose;
  8. import javax.websocket.OnError;
  9. import javax.websocket.OnMessage;
  10. import javax.websocket.OnOpen;
  11. import javax.websocket.Session;
  12. import javax.websocket.server.ServerEndpoint;
  13.  
  14. import org.slf4j.Logger;
  15. import org.slf4j.LoggerFactory;
  16. import org.springframework.stereotype.Component;
  17.  
  18. /**
  19.  * WebSocket服务端
  20.  * @author ygc
  21.  */
  22. @ServerEndpoint(value = "/websocket")
  23. @Component
  24. public class WebSocketServer {
  25. 	
  26. 	private final static Logger log = LoggerFactory.getLogger(WebSocketServer.class);
  27. 	private static final AtomicInteger OnlineCount = new AtomicInteger(0);
  28. 	// concurrent包的线程安全Set，用来存放每个客户端对应的Session对象。
  29. 	private static CopyOnWriteArraySet<Session> SessionSet = new CopyOnWriteArraySet<Session>();
  30. 	
  31.  
  32. 	/**
  33. 	 * 连接建立成功调用的方法
  34. 	 * @throws IOException 
  35. 	 */
  36. 	@OnOpen
  37. 	public void onOpen(Session session) throws IOException {
  38. 		SessionSet.add(session); 
  39. 		int personCount = OnlineCount.incrementAndGet(); // 在线数加1
  40. 		System.out.println("有连接加入，当前连接数为："+personCount);
  41. 		log.info("有连接加入，当前连接数为：{}", personCount);
  42. //		SendMessage(session, "连接成功,当前连接人数为:"+personCount);
  43. //		SendMessage(session,String.valueOf(personCount));
  44. 		BroadCastInfo(String.valueOf(OnlineCount.get()));
  45. 	}
  46. 	
  47. 	/**
  48. 	 * 连接关闭调用的方法
  49. 	 * @throws IOException 
  50. 	 */
  51. 	@OnClose
  52. 	public void onClose(Session session) throws IOException {
  53. 		int personCount = OnlineCount.decrementAndGet();
  54. 		System.out.println("有连接关闭，当前连接数为："+personCount);
  55. 		log.info("有连接关闭，当前连接数为：{}", personCount);
  56. 		SessionSet.remove(session);	
  57. 	}
  58.  
  59. 	/**
  60. 	 * 收到客户端消息后调用的方法
  61. 	 * 
  62. 	 * @param message
  63. 	 *            客户端发送过来的消息
  64. 	 * @throws IOException 
  65. 	 */
  66. 	@OnMessage
  67. 	public void onMessage(String message, Session session) throws IOException {
  68. 		log.info("来自客户端的消息：{}",message);
  69. //		System.out.println("来自客户端的消息:"+message);
  70. //		SendMessage(session, "收到消息，消息内容："+message);
  71. 		if(message.equals("管理平台")) {
  72. 			System.out.println("收到平台类型:"+message);
  73. 		}
  74. //		if(message.equals("新增人数")) {
  75. //			System.out.println("打开页面:"+message);
  76. //			BroadCastInfo(String.valueOf(OnlineCount.get()+1));
  77. //		}
  78. 		if(message.equals("关闭页面")) {
  79. 			System.out.println("收到关闭页面:"+message);
  80. 			//在线数加-1
  81. 			BroadCastInfo(String.valueOf(OnlineCount.get()-1));
  82. 		}		
  83. 	}
  84.  
  85. 	/**
  86. 	 * 出现错误
  87. 	 * @param session
  88. 	 * @param error
  89. 	 */
  90. 	@OnError
  91. 	public void onError(Session session, Throwable error) {
  92. 		log.error("发生错误：{}，Session ID： {}",error.getMessage(),session.getId());
  93. 		System.out.println("发生错误：{}，Session ID： "+error.getMessage()+session.getId());
  94. 		error.printStackTrace();
  95. 	}
  96.  
  97. 	/**
  98. 	 * 发送消息，实践表明，每次浏览器刷新，session会发生变化。
  99. 	 * @param session
  100. 	 * @param message
  101. 	 */
  102. 	public static void SendMessage(Session session, String message) {
  103. 		try {
  104. 			session.getBasicRemote().sendText(message);
  105. //			session.getBasicRemote().sendText(String.format("%s (From Server，Session ID=%s)",message,session.getId()));
  106. 		} catch (IOException e) {
  107. 			log.error("发送消息出错：{}", e.getMessage());
  108. 			System.out.println("发送消息出错：{}"+e.getMessage());
  109. 			e.printStackTrace();
  110. 		}
  111. 	}
  112.  
  113. 	/**
  114. 	 * 群发消息
  115. 	 * @param message
  116. 	 * @throws IOException
  117. 	 */
  118. 	public static void BroadCastInfo(String message) throws IOException {
  119. 		for (Session session : SessionSet) {
  120. 			if(session.isOpen()){
  121. 				SendMessage(session, message);
  122. 			}
  123. 		}
  124. 	}
  125.  
  126. 	/**
  127. 	 * 指定Session发送消息
  128. 	 * @param sessionId
  129. 	 * @param message
  130. 	 * @throws IOException
  131. 	 */
  132. 	public static void SendMessage(String sessionId,String message) throws IOException {
  133. 		Session session = null;
  134. 		for (Session s : SessionSet) {
  135. 			if(s.getId().equals(sessionId)){
  136. 				session = s;
  137. 				break;
  138. 			}
  139. 		}
  140. 		if(session!=null){
  141. 			SendMessage(session, message);
  142. 		}
  143. 		else{
  144. 			log.warn("没有找到你指定ID的会话：{}",sessionId);
  145. 			System.out.println("没有找到你指定ID的会话:"+sessionId);
  146. 		}
  147. 	}
  148. 	
  149. }
  150.

三、React+Umi+Antd 实现前端 WebSocket 通讯

js 需要安装 socket.io

命令: npm  socket.io 或者 yarn add socket.io

  1.   componentDidMount() { 
  2.  let ws = new WebSocket("ws://localhost:12935/20191108_V1.0_xdnx/websocket");
  3.     if (typeof (WebSocket) == "undefined") {
  4.       console.log("遗憾：您的浏览器不支持WebSocket");
  5.     } else {
  6.       console.log("恭喜：您的浏览器支持WebSocket");
  7.       ws.onopen = (evt)=> {
  8.         console.log("Connection open ...");
  9.         ws.send("管理平台");
  10.         ws.send("新增人数");
  11.       };
  12.  
  13.       ws.onmessage = (evt)=> {
  14.         console.log( "Received Message: " + evt.data);
  15.         // alert(evt.data)
  16.         //this.state.messageData 为接受数据的变量
  17.         let messageData=this.state.messageData;
  18.         this.setState({
  19.           messageData:evt.data
  20.         })
  21.         // ws.close();
  22.       };
  23.       ws.onclose = (evt)=> {
  24.         // alert(evt.data)
  25.         console.log("Connection closed.");
  26.         // ws.close();
  27.       };
  28.       ws.onerror = (evt)=> {
  29.         console.log("error")
  30.       };
  31.       window.onbeforeunload = (event)=> {
  32.         console.log("关闭WebSocket连接！");
  33.         ws.send("关闭页面");
  34.         event.close();
  35.       }
  36.   
  37.   }
  38. ｝

render html

这里用的antd的统计数值控件

  1.           <div  style={{
  2.             background: '#ececec',
  3.             padding: '10px',
  4.             width:'20%',
  5.             float:'left',marginTop:'20px'
  6.           }}>
  7.             <Row gutter={16}>
  8.               <Col span={12}>
  9.                 <Card>
  10.                   <Statistic
  11.                     title="管理平台当前在线人数"
  12.                     value={this.state.messageData}
  13.                     precision={0}
  14.                     valueStyle={{ color: '#3f8600' }}
  15.                     suffix="人"
  16.                   />
  17.                 </Card>
  18.               </Col>
  19.  
  20.             </Row>
  21.           </div>

四、实现结果

五、关于部署

如果使用Tomcat部署war包下面这段可以注释掉，由Tomcat管理，页面路径需要改成和服务器一致的，不用加Http开头

eg: ws://localhost:12935/20191108_V1.0_xdnx/websocket

  1. //package com.kero99.socket;
  2. //
  3. //import org.springframework.context.annotation.Bean;
  4. //import org.springframework.context.annotation.Configuration;
  5. //import org.springframework.stereotype.Component;
  6. //import org.springframework.web.socket.server.standard.ServerEndpointExporter;
  7. //
  8. ///**
  9. // * 开启WebSocket支持
  10. // * @author ygc
  11. // */
  12. //@Configuration  
  13. //@Component
  14. //public class WebSocketConfig {  
  15. //	
  16. //	@Bean
  17. //    public ServerEndpointExporter serverEndpointExporter() {  
  18. //        return new ServerEndpointExporter();  
  19. //    }  
  20. //  
  21. //}

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/码创造者/article/detail/770811
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号