使用WebSocket实现网页声音提醒

1、SpringBoot整合WebSocket

        <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency>

<parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.0.6.RELEASE</version><relativePath /> <!-- lookup parent from repository --></parent><groupId>com.mmt</groupId><artifactId>SpringBootWeb</artifactId><version>0.01</version><name>SpringBootWeb</name><properties><java.version>1.8</java.version></properties><dependencies><!-- springboot 整合 log4j --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter</artifactId><exclusions><exclusion><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-logging</artifactId></exclusion></exclusions></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-log4j</artifactId><version>1.3.8.RELEASE</version></dependency><!--end springboot 整合 log4j --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><scope>runtime</scope><optional>true</optional></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency><!--jsp支持 --><!-- servlet 依赖. --><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><scope>provided</scope></dependency><dependency><groupId>javax.servlet</groupId><artifactId>jstl</artifactId></dependency><!-- tomcat 的支持. --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-tomcat</artifactId></dependency><dependency><groupId>org.apache.tomcat.embed</groupId><artifactId>tomcat-embed-jasper</artifactId><scope>provided</scope></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build>

#====================================================
spring.application.name: SpringBootWeb
#server
server.port=80
server.servlet.context-path=/

#====================================================
spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp

2、后端代码：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;/*** 开启WebSocket支持* */
@Configuration
public class WebSocketConfig {@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}}


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.PathParam;
import javax.websocket.server.ServerEndpoint;import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.springframework.stereotype.Component;/*** @author 008*  WebSocket*/
@ServerEndpoint("/websocket/{id}")
@Component
public class WebSocketServer {private static Log log = LogFactory.getLog(WebSocketServer.class);// 当前在线连接数,要求线程安全。private static int count = 0;// concurrent包的线程安全Set，用来存放每个客户端对应的WebSocket对象。private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>();// 与某个客户端的连接会话通过它来给客户端发送数据，  private Session session;// 每个连接的连接标识private String id = "";/*** 连接建立成功调用的方法*/@OnOpenpublic void onOpen(Session session, @PathParam("id") String id) {this.session = session;webSocketSet.add(this); addcount(); this.id = id;log.info("有一连接打开！当前连接数为" + getcount());try {sendMessage("connect success");} catch (IOException e) {log.error("websocket exception: " , e);}}/***   连接关闭调用的方法*/@OnClosepublic void onClose() {webSocketSet.remove(this);subcount(); log.info("有一连接关闭！当前连接数为" + getcount());}/***       收到客户端（前端）消息后调用的方法*/@OnMessagepublic void onMessage(String message, Session session) {log.info(id + " , message:" + message);// 群发消息for (WebSocketServer socket : webSocketSet) {try {socket.sendMessage(message);} catch (IOException e) {log.error("websocket exception: " , e);}}}/***   异常*/@OnErrorpublic void onError(Session session, Throwable error) {log.error("websocket exception: " , error);}/***      服务器端主动推送信息到前端*/public void sendMessage(String message) throws IOException {this.session.getBasicRemote().sendText(message);}public static void sendMessage(String id , String message) throws IOException {log.info(id + " , message:" + message);for (WebSocketServer socket : webSocketSet) {if (socket.id.equals(id)) {socket.sendMessage(message);}}}public static synchronized int getcount() {return count;}public static synchronized void addcount() {WebSocketServer.count++;}public static synchronized void subcount() {WebSocketServer.count--;}
}

@RestController
public class PushController {//触发WebSocket，向前端发送数据@RequestMapping("/push/{id}")public String push(@PathVariable String id, String message) {try {WebSocketServer.sendMessage(id , message);return "success" ;} catch (IOException e) {e.printStackTrace();}return "failed" ;}
}

3、页面代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
</head>
<body><audio controls="controls"  id="my_audio" src="audio/Kalimba.mp3" style="disylay:none;">your browser dose not support the audio element</audio><span id="msg"></span>
<script type="text/javascript">var socket;  if(typeof(WebSocket) == "undefined") { $("#msg").html("您的浏览器不支持WebSocket") ;console.log("您的浏览器不支持WebSocket");  }else{  $("#msg").html("") ;console.log("您的浏览器支持WebSocket");  //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接  socket = new WebSocket("ws://localhost:80/websocket/10");  //打开事件  socket.onopen = function() {  console.log("Socket 已打开");  };  //获得消息事件  socket.onmessage = function(msg) {  console.log("msg : " + msg.data);  //发现消息进入    开始处理前端触发逻辑if(msg.data == "OK"){console.log("start  play ...");  var my_audio = document.getElementById("my_audio");my_audio.play(); send() ;}};  //关闭事件  socket.onclose = function() {  console.log("Socket已关闭");  };  // 异常 socket.onerror = function() {  alert("Socket发生了错误");  } ; //发送消息到后端 function send(){socket.send("已经接收到消息。。。");}}</script>
</body>
</html>

4、测试

打开音频页面： http://localhost/audio.html , 此时不会自动播放音频。

触发WebSocket： http://localhost/push/10?message=OK , websocket给前端发送"OK" , 调用my_audio.play(); 播放音频。

可能会遇到问题： my_audio.play(); 播放音频时可能会遇到浏览器报错：Uncaught (in promise) DOMException ，

谷歌浏览器解决：谷歌浏览器输入 chrome://flags , 搜索 autoplay-policy , 选择 no user gesture is required , 然后重启浏览器即可。

火狐浏览器：在URL地址栏左边点击开启即可。

使用WebSocket实现网页声音提醒相关推荐

电脑没有声音一键修复_电脑上有没有好用点的办公提醒小软件？有带声音提醒的桌面便签软件吗...
经常在电脑上办公的话,恐怕难免在电脑上记录待办事项.只不过,待办事项记下来之后,还需要提醒呢!而问题恰恰出在这里:因为电脑上的记事软件虽然很多,但是提醒工具却很缺乏!那么多记事软件中,好像也就只有Wi ...
H5托盘通知(带声音提醒)
今天做了个仿网页版微信的托盘通知小例子,第一次写博客,直接上代码. 参考链接: http://www.cnblogs.com/a14907/p/6472741.html----消息通知 https:/ ...
网页更新提醒官方教程（选项配置）
网页更新提醒:任何网页.任何RSS.任何API,给您24小时盯着全局配置全局配置用于设置所有任务公共或默认属性,避免相同的重复设置. 公共配置选取模式:具体参考网页更新提醒官方教程(区域圈选) ...
猎豹浏览器网页声音怎么关闭
打来猎豹浏览器,然后点击左上角的"豹头"图标; 猎豹浏览器网页声音怎么关闭?2步关闭网页声音这时可以在弹出的菜单栏中看到有一个"关闭所有页面声音"的选项,点击 ...
猎豹浏览器网页声音怎么关闭 2步关闭网页声音
作为一款主打安全与极速特性的浏览器产品,猎豹浏览器在国内也有不少忠实的粉丝.不过,想要熟练的使用猎豹浏览器中的各种功能,其实并不容易!下面小编就来介绍一下猎豹浏览器关闭网页声音的方法,小伙伴们可不要错 ...
【VUE】浏览器消息通知（声音提醒，标题栏闪动，弹框提醒）
思路: 浏览器通知使用Notification,详情可查看Notification.Notification() 标题栏闪动利用循环实现声音提醒可以使用播放本地音频实现总结:在当前页面接收到消息时 ...
Chrome 66之后禁止网页声音自动播放问题解决
1.问题描述我们给客户做的一个网页大屏,有报警音效的功能,当用户触发报警条件时,在大屏播放报警音效.但是,由于谷歌浏览器在66版本后禁止网页声音自动播放,必须用户在与网页有交互之后才允许播放声音,否 ...
基于websocket的网页实时消息推送与在线聊天（上篇）
文章目录 @[toc] 基于websocket的网页实时消息推送与在线聊天(上篇) "使用dwebsocket在django中实现websocket" websocket原理图 d ...
php下单声音提醒,拼多多商家怎么设置下单的声音？开启方法是什么？
有的时候因为太忙,就没看到买家们发过来的消息,下单的消息也来不及看,然后就会导致服务不到位哦,各位拼多多商家们,你其实可以去设置开启声音提醒哦,以下就是设置的方法啦. 不知道拼多多商家登陆口的页面,直 ...