websocket实现对特定页面推送信息

见贤丩思齐

于 2024-10-30 14:10:42 发布

阅读量718

点赞数 25

文章标签： websocket 网络协议

本文链接：https://blog.youkuaiyun.com/qq_42537736/article/details/143363689

版权

其他的配置请看上一篇文章，这里只说更改部分

一、MyWebSocketHandler 类更改

package com.inprod.inpro.demos.handle;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
import java.io.IOException;
import java.net.URI;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.ConcurrentMap;
import java.util.concurrent.CopyOnWriteArraySet;
@Component
public class MyWebSocketHandler extends TextWebSocketHandler {

private final ConcurrentMap<String, WebSocketSession> sessions = new ConcurrentHashMap<>();

@Override
public void afterConnectionEstablished(WebSocketSession session){
URI uri = session.getUri();
String query = uri.getQuery();
String key = query.replace("key=", "");
sessions.put(key,session);
System.out.println("New session added, session id: " + session.getId());
}

@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
System.out.println("Received message: " + message.getPayload());
// 在这里你可以处理客户端发来的消息，比如进行广播等
}

@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
sessions.remove(session);
System.out.println("Session closed, session id: " + session.getId());
}

/**
* 向所有页面发送信息
* @param message
* @throws IOException
*/
public void sendMessageToAll(String message) throws IOException {
for (String key : sessions.keySet()) {
WebSocketSession session = sessions.get(key);
if (session.isOpen()) {
session.sendMessage(new TextMessage(message));
}
}
}
/**
* 向单个页面发送
* @param key
* @param message
*/
public void sendMessageByKey(String key, String message){
WebSocketSession session = sessions.get(key);
if (session != null && session.isOpen()) {
try {
session.sendMessage(new TextMessage(message));
} catch (Exception e) {
e.printStackTrace();
}
}
}
}
二、后台发送方法更改

package com.inprod.inpro.demos.handle;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;

/**
* @ClassName : MessageHandler
* @Description :
* @Author : JHY
* @Date: 2024-10-24 08:41
*/

@RestController
public class MessageHandler {
@Resource
private MyWebSocketHandler webSocketHandler;
@MessageMapping("/send")
@SendTo("/topic/messages")
public String sendMessage() {
return "这是前台请求后台得反馈数据";
}
@GetMapping("/sendHeml")
public void sendHeml(){
try {
String message = "这是发送得websocket测试消息" + System.currentTimeMillis();
//webSocketHandler.sendMessageToAll(message);
webSocketHandler.sendMessageByKey("connect_index", message);
} catch (Exception e) {
throw new RuntimeException(e);
}
}
}
三、前端页面长连接更改

<!DOCTYPE html>
<html>
<head>
<title>WebSocket Demo</title>
<script src="https://cdn.jsdelivr.net/npm/sockjs-client/dist/sockjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/stompjs/lib/stomp.min.js"></script>
</head>
<body>
<div>
<input type="text" id="messageInput" placeholder="Type a message...">
<button οnclick="sendMessage()">Send</button>
</div>
<ul id="messagesList"></ul>
<script>
//-------------前台页面向后台发送请求并获得相应展示在页面-------------------
var socket = new SockJS('/websocket-endpoint');
var stompClient = Stomp.over(socket);
stompClient.connect({}, function (frame) {
stompClient.subscribe('/topic/messages', function (message) {
console.log(2222,message.body)
var messagesList = document.getElementById('messagesList');
var listItem = document.createElement('li');
listItem.textContent = message.body;
messagesList.appendChild(listItem);
});
});
function sendMessage() {
var messageInput = document.getElementById('messageInput');
stompClient.send('/app/send', {}, messageInput.value);
messageInput.value = '';
}
//--------------------接收后台发送得websocket信息并展示在页面----------------
var connectKey = "connect_index";
const ws = new WebSocket('ws://localhost:10086/ws?key='+connectKey);
ws.onopen = function() {
console.log('websocket。。。。Connection。。。。success');
};
ws.onmessage = function(event) {
console.log(123,event.data)
var messagesList = document.getElementById('messagesList');
var listItem = document.createElement('li');
listItem.textContent = event.data;
messagesList.appendChild(listItem);
};
ws.onclose = function() {
console.log('Connection closed');
};
ws.onerror = function(error) {
console.error('WebSocket Error: ', error);
};
</script>
</body>
</html>