spring springmvc js websocket 监听

第一步:web.xml中支持异步。所有的filter及servlet

<filter>
    <filter-name>characterEncoding</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
    <init-param>
      <param-name>forceEncoding</param-name>
      <param-value>true</param-value>
    </init-param>
    <async-supported>true</async-supported>
  </filter>
  
  <filter-mapping>
    <filter-name>characterEncoding</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
  
  <!-- 注册中央调度器 -->
  <servlet>
    <servlet-name>springmvc</servlet-name><!-- 随便 -->
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <!-- 指定springmvc配置文件位置及文件名 -->
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:applicationContext-mvc.xml</param-value><!-- springmvc的配置文件,classpath代表类路径下 -->
    </init-param>
    <!-- 写一个>0的数字,越小优先级越高(<=0和没有设置没区别),表明tomcat服务器在启动的时候,就将DispatcherServlet对象给创建了 -->
    <!-- 在tomcat启动时,直接创建当前servlet -->
    <load-on-startup>1</load-on-startup>
    <async-supported>true</async-supported>
  </servlet>

第二步。pom.xml依赖

<!-- for support web socket -->  
        <dependency>  
            <groupId>javax.websocket</groupId>  
            <artifactId>javax.websocket-api</artifactId>  
            <version>1.1</version>  
            <scope>provided</scope> <!-- 注意,scope必须为provided,否则runtime会冲突,如果使用tomcat 8,还需要将TOMCAT_HOME/lib下的javax.websocket-api.jar一并删除 -->  
        </dependency> 
        
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.3.0</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.3.1</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.3.3</version>
        </dependency>

第三步:

package com.ldr.websocket;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
/**
 * 
 * @author Wang&Yang
 * @email 867986155@qq.com
 * @date 2018-05-02
 * @remark esno company
 * @version 1.0.0
 * @description:
 * 这个类表示启用websocket消息处理,以及收发消息的域

    config.enableSimpleBroker("/queue", "/topic");这句表示在/queue", "/topic这两个域上可以向客户端发消息;

    registry.addEndpoint("/endpointChat").withSockJS();客户端在此连接websocket server
 */
@Configuration /*别忘记了要让spring管理咯*/ 
@EnableWebSocketMessageBroker  
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {  
  
    @Override  
    public void configureMessageBroker(MessageBrokerRegistry config) {  
        config.enableSimpleBroker("/queue", "/topic");
    }  
  
    @Override  
    public void registerStompEndpoints(StompEndpointRegistry registry) {  
        //注册一个名字为"endpointChat" 的endpoint,并指定 SockJS协议。   点对点-用
        registry.addEndpoint("/endpointChat").withSockJS();  
    }  
  
}  
package com.ldr.websocket;

import java.util.HashMap;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import com.ldr.base.GsonBean;

@Controller  
public class WebSocketController {  
  
    public SimpMessagingTemplate template;  
  
    @Autowired  
    public WebSocketController(SimpMessagingTemplate template) {  
        this.template = template;  
    }  
 
    
    @RequestMapping("/noticeDataGenResult")
    public void noticeDataGenResult(@RequestParam(value="fn") String fileName,@RequestParam(value="rc") String genResult/*1为成功,0为失败*/) {
            Map<String,String> datas=new HashMap<String,String>(5);
            datas.put("fileName", fileName);
            datas.put("genResult", genResult);
            template.convertAndSend("/topic/getResponse", new GsonBean(200, datas));
        }
    }

 

第四步:jsp

    <!-- websock.js -->
    <script type="text/javascript" src="../sys/js/websock/sockjs.min.js"></script>
    <script type="text/javascript" src="../sys/js/websock/stomp.min.js"></script>

$(function () {
        connect();
    });

    function connect() {
        var sock = new SockJS("../endpointChat");
        var stomp = Stomp.over(sock);
        stomp.connect('guest', 'guest', function(frame) {
            stomp.subscribe('/topic/getResponse', function (response) { //订阅/topic/getResponse 目标发送的消息。这个是在控制器的@SendTo中定义的。
                var resultObj=$.parseJSON(response.body);
                console.dir(resultObj);
            });
        });
        
    }

 

转载于:https://www.cnblogs.com/wangyang108/p/8980582.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 引入相关依赖 在pom.xml文件中引入以下依赖: ``` <dependency> <groupId>org.springframework</groupId> <artifactId>spring-websocket</artifactId> <version>5.2.9.RELEASE</version> </dependency> ``` 2. 配置WebSocketSpringMVC配置文件中配置WebSocket: ``` @Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(chatWebSocketHandler(), "/chat"); } @Bean public WebSocketHandler chatWebSocketHandler() { return new ChatWebSocketHandler(); } } ``` 上述代码中,我们通过`@EnableWebSocket`注解启用WebSocket,并通过`registerWebSocketHandlers`方法注册`chatWebSocketHandler`来处理所有连接到`/chat`的WebSocket请求。 3. 创建WebSocketHandler 接下来,创建一个WebSocketHandler类,命名为`ChatWebSocketHandler`: ``` public class ChatWebSocketHandler extends TextWebSocketHandler { private Map<String, WebSocketSession> sessionMap = new ConcurrentHashMap<>(); @Override public void afterConnectionEstablished(WebSocketSession session) throws Exception { String username = session.getPrincipal().getName(); sessionMap.put(username, session); } @Override public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception { String username = session.getPrincipal().getName(); String recipientUsername = getRecipientUsername(message); String textMessage = getTextMessage(message); WebSocketSession recipientSession = sessionMap.get(recipientUsername); if (recipientSession == null) { throw new IllegalArgumentException("Recipient " + recipientUsername + " not found"); } TextMessage text = new TextMessage(username + ": " + textMessage); recipientSession.sendMessage(text); } @Override public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception { String username = session.getPrincipal().getName(); sessionMap.remove(username); } private String getRecipientUsername(WebSocketMessage<?> message) { String payload = (String) message.getPayload(); return payload.substring(0, payload.indexOf(':')); } private String getTextMessage(WebSocketMessage<?> message) { String payload = (String) message.getPayload(); return payload.substring(payload.indexOf(':') + 2); } } ``` 上述代码中,我们创建了一个WebSocketHandler类,并重写了`afterConnectionEstablished`、`handleMessage`和`afterConnectionClosed`方法。在`afterConnectionEstablished`方法中,我们将客户端Session保存在一个Map中,以便后续处理时可以根据用户名找到对应的Session;在`handleMessage`方法中,我们从WebSocket消息中获取发送者用户名、接收者用户名和消息内容,并使用接收者用户名获取接收者Session,然后将消息发送给接收者;在`afterConnectionClosed`方法中,我们从Map中删除已经断开连接的Session。 4. 创建WebSocket客户端 最后,创建一个Web页面来展示WebSocket实时通讯效果,代码如下: ``` <!DOCTYPE html> <html> <head> <title>WebSocket Chat</title> <script type="text/javascript"> var socket = new WebSocket("ws://localhost:8080/chat"); socket.onopen = function() { console.log("WebSocket connection established."); } socket.onmessage = function(event) { console.log(event.data); var chatMessage = document.createElement("p"); chatMessage.innerText = event.data; document.getElementById("chat").appendChild(chatMessage); } socket.onclose = function(event) { console.log("WebSocket connection closed (" + event.code + ")"); } function sendMessage() { var recipient = document.getElementById("recipient").value; var message = document.getElementById("message").value; var payload = recipient + ": " + message; socket.send(payload); } </script> </head> <body> <div id="chat"></div> <br> <input type="text" placeholder="Recipient" id="recipient"><br> <input type="text" placeholder="Message" id="message"><br> <button onclick="sendMessage()">Send</button> </body> </html> ``` 上述代码中,我们通过`WebSocket`对象创建了一个WebSocket客户端,并监听了`onopen`、`onmessage`和`onclose`事件。当WebSocket连接成功建立后,会调用`onopen`方法;当收到消息时,会调用`onmessage`方法,在页面上显示收到的消息;当WebSocket连接断开时,会调用`onclose`方法。同时,页面上提供了输入框和发送按钮,点击发送按钮后,会从输入框中获取接收者和消息内容,然后通过WebSocket发送到服务器。 至此,SpringMVCWebSocket实现一对一聊天就完成了。如果需要群聊功能,只需要稍作修改即可。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值