webSocket

最新推荐文章于 2024-10-08 14:44:14 发布

原创最新推荐文章于 2024-10-08 14:44:14 发布 · 178 阅读

CC 4.0 BY-SA版权

本文详细介绍了一种基于WebSocket的实时通信方案，包括后端配置、前端连接建立及消息交互流程。通过具体代码示例，展示了如何在Spring框架下实现WebSocket配置，前端使用SockJS与Stomp完成连接，并实现消息订阅与发送。

建立连接
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/wypWebSocket").withSockJS();//连接url
}

@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableSimpleBroker("/topic/");//广播的方式
registry.setApplicationDestinationPrefixes("/wyp");//前缀
}
}

前端：
var stompClient = null;
//建立连接
$(function () {
connect();
})
function connect() {
var socket = new SockJS('/wypWebSocket');//和WebSocketConfig 的registerStompEndpoints 方法对应用于连接后台
stompClient = Stomp.over(socket);
stompClient.connect({}, function (frame) {
console.log('Connected: ' + frame);
stompClient.subscribe('/topic/message', function (data) { //订阅 /topic/message 发送请求在这个路由下就会接收到信息
let dat = JSON.parse(data.body);
console.log(dat);
alert(JSON.stringify(dat));
showGreeting(dat);
//showGreeting(data);
});
});
}

function showGreeting(content) {
content.forEach(item =>{
$("#dd").html(item.name);
})

/*
当出现转换异常时：例如 "（代表""）用下面的方法转换在html中自动会转成好的格式
或者替换
$("#inp").html(content)

$("#dd").html(JSON.parse($("#inp").html()).name)

let jsonString = JSON.stringify(content);

let jso = jsonString.replace(new RegExp(""","gm"),"\"");

alert(JSON.parse(jso.substr(1,jso.length-2)).name);*/

}
function sendName() {
stompClient.send("/wyp/chat", {}, JSON.stringify({"name": $("#name").val()}));
}

后台：
@RestController
public class WebSocket {

@Autowired
SimpMessagingTemplate template;

/*
* 跳转页面
* */
@GetMapping("socket")
public ModelAndView getSocket(){
ModelAndView modelAndView = new ModelAndView("socket");
return modelAndView;
}

/*
* 当请求这个方法时，会将数据发送到前端和前端的"/topic/message"进行绑定
* */
@GetMapping("/serverSend")
public void serverSendMsg(User user){
User u1 = new User();
User u2 = new User();
u1.setName("王雅");
u2.setName("王ping");
List<User> list = new ArrayList<>();
list.add(u1);
list.add(u2);
template.convertAndSend("/topic/message",JSON.toJSON(list));
}

/**
* 前端连接后端前端发送请求到这里
* */
@MessageMapping("/chat") //前端请求
@SendTo("/topic/message") // 转达到前端接收
public void chat(String name) {
System.out.println(name);
User u2 = new User();

u2.setName("王雅");
List<User> list = new ArrayList<>();
list.add(u2);
template.convertAndSend("/topic/message", JSON.toJSON(list));
}
}