import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import org.springframework.stereotype.Component;
/**
* WebSocketServer服务器端
*
* @author han
*
*/
@Component
@ServerEndpoint("/WebSocketServer")
public class WebSocketServer {
// concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象,若要实现服务端与单一客户端通信的话,可以使用Map来存放,其中Key可以为用户标识
private static CopyOnWriteArraySet<WebSocketServer> webSockets = new CopyOnWriteArraySet<WebSocketServer>();
private Session session;
@OnOpen
public void onOpen(Session session) {
this.session = session;
webSockets.add(this);
}
@OnClose
public void onClose() {
webSockets.remove(this);
}
@OnMessage
public void onMessage(String message) {
}
/**
*
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error) {
error.printStackTrace();
}
/**
* 服务器主动推送消息
*/
public void sendMessage(String message) {
try {
for (WebSocketServer webSocket : webSockets) {
webSocket.session.getBasicRemote().sendText(message);
}
} catch (IOException e) {
e.printStackTrace();
}
}
}
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
/**
* 注册webSocket端点
*/
public void registerStompEndpoints(StompEndpointRegistry registry) {
// 添加一个/WebSocketServer端点,客户端就可以通过这个端点来进行连接;withSockJS作用是添加SockJS支持
registry.addEndpoint("/WebSocketServer").setAllowedOrigins("*").withSockJS();
}
}
<html>
<body>
<audio src="${path}/webapp/music/msg.mp3" id="myaudio" controls="controls" loop="false" hidden="true"></audio>
<script>
var websocket=null;
if('WebSocket' in window){
websocket=new WebSocket('ws://localhost:8080/WebSocketServer');
}else{
layer.msg('该浏览器不支持websocket',{icon:2,time:1000});
}
websocket.onopen=function(event){
console.info('建立连接');
}
websocket.onclose=function(event){
console.info('关闭连接');
}
websocket.onmessage=function(event){
if(event.data!=null){
document.getElementById('myaudio').play();
layer.confirm("您有新的消息请注意查收!", {
btn: ['确定','取消']
}, function(){
closePlay();
},function(){
closePlay();
});
}
//弹框提醒,播放音乐
}
websocket.onerror=function(){
console.info('websocket通讯发生错误!');
}
websocket.onbeforeunload=function(){
websocket.close();
}
function autoPlay() {
var myAuto = document.getElementById('myaudio');
myAuto.play();
}
function closePlay() {
var myAuto = document.getElementById('myaudio');
myAuto.pause();
myAuto.load();
}
</script>
</body>
</html>