webSocket客户端使用原生的HTML5
首先js判断该浏览器是否支持webSocket
var webSocket = null;
if('webSocket' in window ){
webSocket = new WebSocket("ws://192.168.1.1/webSocket");
}else{
alert("该浏览器不支持webSocket");
}
写出客户端事件:
webSocket.onopen(even){
console.log("连接成功");
}
webSocket.onclose(){
console.log.("关闭连接")
}
webSocket.onmessage(even){
console.log("服务器发送来的数据:"+even.data);
//这里作出处理 页面的弹出 提示音出现
document.getElementById("bgm").play();
.....
}
webSocket.onerror=function(){
console.log("webSocket出现错误");
}
window.onbeforeunload=function(){
webSocket.close();
}
原生页面提示音:
<audio id="bgm" loop="loop">
<source src="/mp3/xx.mp3" type="audio/mpeg"/>
</audio>
在后端:
引入依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
<dependency>
首先需要配置一个class交个spring管理
@Component
public class WebSocketConfig{
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}
然后开始写webSocket类
这里我们单独用一个包 webSocketServer
@Component
@ServerEndpoint("/webSocket")
@Slf4j
public class WebSocket{
private Session session ;
private CopyOnWriteArraysSet<WebSocket> webSockets = new
CopyOnWriteArraysSet<WebSocket>();
//开始对接前端事件 用注解
@OnOpen
public void onopen(Seesion session ){
this.session = session ;
webSockets.add(this);
log.info("已经连接 连接数:{}",webSockets.size());
}
@OnClose
punlic void onClose(){
webSockets.remove(this);
log.info("已经连接 连接数:{}",webSockets.size());
}
public void sendMsg(String msg){
for(WebSocket webSocket :webSocktes){
try{ //为什么不抛出呢? 因为不妨碍别的进行,这个地方死可以 但调用的地方捕获的捕获的话就会整体回滚 就不好了。
webocket.session.getBasicRemote.sendText(msg);
log.info("[发送数据为{}]",msg);
}catch(IOException e){
e.printStrackTrace();
}
}
}
}
那么根据业务逻辑调用这个方法就可以了