springboot整合tomcat自带的websocket实现在线聊天及象棋网页对战功能

本文介绍了使用SpringBoot结合WebSocket技术重构一个在线聊天和象棋网络对战的应用。相较于之前的CS架构,该应用利用WebSocket进行实时消息推送,减少资源消耗。项目包括登陆注册、聊天室、游戏大厅等功能,且提供了部分关键代码片段。
摘要由CSDN通过智能技术生成

以前用flex做过中国象棋对战版CS架构的,没用到websocket,消息推送使用定时刷新不断请求服务器,比较耗资源,现在刚接触websocket,闲来无事就重写个小项目消遣下.本人前端菜鸟,Ext也是刚接触,画的界面比较丑,勿喷.

先上截图~


登陆界面,没有用户可以注册一个,用的是sqlite数据库



聊天主界面,可以选择跟在线的人聊天,也可以点群消息,广播消息给所有人



游戏大厅及游戏主界面.右边显示系统提示信息 也可以在这里跟对手聊天~


部分代码:

导入springboot所用jar:pom文件如下:


   
   
  
    
    
     
     4.0.0
    
    
  
    
    
     
     com.dongge
    
    
  
    
    
     
     myweb
    
    
  
    
    
     
     0.0.1-SNAPSHOT
    
    
  
    
    
		
     
     
			
      
      
				
       
       
         org.springframework.boot 
       
				
       
       
         spring-boot-starter-parent 
       
				
       
       
         pom 
       
				
       
       
         1.5.3.RELEASE 
       
				
       
       
         import 
       
			
      
      
		
     
     
	
    
    
  
    
    
  	
     
     
		
      
      
       
       org.springframework.boot
      
      
		
      
      
       
       spring-boot-starter-web
      
      
	
     
     
	
     
     
	    
      
      
       
       org.mybatis.spring.boot
      
      
	    
      
      
       
       mybatis-spring-boot-starter
      
      
	    
      
      
       
       1.3.0
      
      
	
     
     
	
     
     
	    
      
      
       
       org.springframework.boot
      
      
	    
      
      
       
       spring-boot-starter-security
      
      
	
     
     
	
     
     
	  
      
      
       
       org.springframework.boot
      
      
	  
      
      
       
       spring-boot-starter-websocket
      
      
	
     
     
	
     
     
	  
      
      
       
       org.xerial
      
      
	  
      
      
       
       sqlite-jdbc
      
      
	
     
     
  
    
    
  
    
    
        
     
     
            
      
      
                
       
       
         org.apache.maven.plugins 
       
                
       
       
         maven-compiler-plugin 
       
                
       
        
        1.7 
        
          1.7 
         
       
            
      
      
            
      
      
                
       
       
         org.springframework.boot 
       
                
       
       
         spring-boot-maven-p
这里是一个示例的Spring Boot + Vue.js + WebSocket在线聊天应用程序的实现。首先,我们可以创建一个Spring Boot工程,然后添加WebSocket的依赖。 在pom.xml文件中添加以下依赖: ```xml <dependencies> <!-- ... --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> </dependencies> ``` 接下来,我们可以编写一个WebSocket配置类,用于注册WebSocket端点和处理器: ```java @Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(new ChatWebSocketHandler(), "/chat"); } } ``` 这里我们注册了一个名为“chat”的WebSocket端点,并将其与一个处理器绑定。 接下来,我们可以编写一个WebSocket处理器类来处理来自客户端的消息: ```java public class ChatWebSocketHandler extends TextWebSocketHandler { private static final List<WebSocketSession> sessions = new CopyOnWriteArrayList<>(); @Override public void afterConnectionEstablished(WebSocketSession session) throws Exception { sessions.add(session); } @Override protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception { for (WebSocketSession s : sessions) { if (s.isOpen()) { s.sendMessage(message); } } } @Override public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception { sessions.remove(session); } } ``` 这个处理器类中,我们定义了一个静态的WebSocketSession列表,用于存储所有连接到服务器的WebSocket会话。在`afterConnectionEstablished`方法中,我们将新的会话添加到列表中。在`handleTextMessage`方法中,我们遍历所有会话并将接收到的消息发送给它们。在`afterConnectionClosed`方法中,我们将关闭的会话从列表中删除。 最后,我们可以编写一个简单的HTML页面,在页面中使用Vue.js和WebSocket API来实现在线聊天功能: ```html <!DOCTYPE html> <html> <head> <title>Chat Room</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div v-for="message in messages">{{ message }}</div> <input v-model="inputMessage" @keyup.enter="send"> </div> <script> var ws = new WebSocket("ws://" + window.location.host + "/chat"); var app = new Vue({ el: '#app', data: { messages: [], inputMessage: '' }, methods: { send: function () { ws.send(this.inputMessage); this.inputMessage = ''; } } }); ws.onmessage = function (event) { app.messages.push(event.data); }; </script> </body> </html> ``` 在这个HTML页面中,我们使用Vue.js来实现数据绑定和事件处理。我们还使用WebSocket API来连接到WebSocket服务器,并在收到消息时更新Vue.js的数据模型。在输入框中按下回车键时,我们将输入框中的内容发送到WebSocket服务器。 以上就是一个简单的Spring Boot + Vue.js + WebSocket在线聊天应用程序的实现
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值