前后端分离,SpringBoot。WEBSocket后台报警页面提示

前端JS

var websocket = null;

//判断当前浏览器是否支持WebSocket, 主要此处要更换为自己的地址

if ('WebSocket' in window) {

websocket = new WebSocket("ws://IP:端口/test/oneToOne");

} else {

alert('Not support websocket')

}

//连接发生错误的回调方法

websocket.onerror = function() {

setMessageInnerHTML("error");

};

//连接成功建立的回调方法

websocket.onopen = function(event) {

setMessageInnerHTML("open");

}

//接收到消息的回调方法

websocket.onmessage = function(event) {

setMessageInnerHTML(event.data);

}

//连接关闭的回调方法

websocket.onclose = function() {

setMessageInnerHTML("close");

}

//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。

window.onbeforeunload = function() {

websocket.close();

}

//将消息显示在网页上

function setMessageInnerHTML(innerHTML) {

document.getElementById('message').innerHTML += innerHTML + '
';

alert(innerHTML);

autoPlay();

}

//关闭连接

function closeWebSocket() {

websocket.close();

}

//发送消息

function send() {

var message = document.getElementById('text').value;

websocket.send(message);

}

function autoPlay(){

var myAuto = document.getElementById('myaudio');

myAuto.src="dist/img/ding.mp3"; //注意这儿是所指向的src,然后下面有一个autoplay属性,只要准备就绪,就播放,所以每次从头开始,因为每次从服务器下载过来就播放

}

JAVA后台

@CrossOrigin(origins = "${server.httppath}", allowCredentials = "true")

@ServerEndpoint(value = "/test/oneToOne")

@Component

public class OneToOneWebSocket {

private static final org.slf4j.Logger log = org.slf4j.LoggerFactory.getLogger(OneToOneWebSocket.class);

/** 记录当前在线连接数 */

private static AtomicInteger onlineCount = new AtomicInteger(0);

/** 存放所有在线的客户端 */

private static ConcurrentHashMap clients = new ConcurrentHashMap<>();

/**

* 连接建立成功调用的方法

*/

@OnOpen

public void onOpen(Session session) {

onlineCount.incrementAndGet(); // 在线数加1

clients.put(session.getId(), session);

// log.info("有新连接加入:{},当前在线人数为:{}", session.getId(), onlineCount.get());

}

/**

* 连接关闭调用的方法

*/

@OnClose

public void onClose(Session session) {

onlineCount.decrementAndGet(); // 在线数减1

clients.remove(session.getId());

// log.info("有一连接关闭:{},当前在线人数为:{}", session.getId(), onlineCount.get());

}

/**

* 收到客户端消息后调用的方法

*

* @param message

* 客户端发送过来的消息

*/

@OnMessage

public void onMessage(String message, Session session) {

// log.info("服务端收到客户端[{}]的消息[{}]", session.getId(), message);

try {

MyMessage myMessage =new MyMessage(message, session.getId());

if (myMessage != null) {

Session toSession = clients.get(myMessage.getUserId());

if (toSession != null) {

this.sendMessage(myMessage.getMessage());

}

}

} catch (Exception e) {

log.error("解析失败:{}", e);

}

}

@OnError

public void onError(Session session, Throwable error) {

log.error("发生错误A");

error.printStackTrace();

}

/**

* 服务端发送消息给客户端

*/

public void sendMessage(String message) {

try {

// log.info("服务端给客户端[{}]发送消息[{}]", toSession.getId(), message);

// toSession.getBasicRemote().sendText(message);

for (HashMap.Entry sessionEntry : clients.entrySet()) {

Session toSession = sessionEntry.getValue();

// 排除掉自己

log.info("服务端给客户端[{}]发送消息{}", toSession.getId(), message);

toSession.getAsyncRemote().sendText(message);

}

} catch (Exception e) {

log.error("服务端发送消息给客户端失败:{}", e);

}

}

}

你可能感兴趣的:(springboot,前后端分离,websocket,websocket,javascript,网络协议)