1参考资料
websocket参考博客 https://www.cnblogs.com/xdp-gacl/p/5193279.html
2主要的思路
将录音生成的blob对象转成base64,然后通过ajax传到后台，将base64转成文件进行上传将文件地址发回前台。前台在将音频地址发到websocket服务端，websocket服务端再将音频地址发回给客户端，
3项目示例
pom.xml中添加Jar包依赖
<dependency>
2 <groupId>javax</groupId>
3 <artifactId>javaee-api</artifactId>
4 <version>7.0</version>
5 <scope>provided</scope>
6 </dependency>1前端代码
录音需要的js recorder.js自行百度下载
<%@page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="cp" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<title>Java后端WebSocket的Tomcat实现</title>
</head>
<body>
<script src="recorder.js"></script>
<script>
</script>
<script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="message"></div>
<%--begin--%>
<input id="VoiceMessage" type="button" onmousedown="recstart()" onmouseup="recstop()" value="按住 说话"/>
</body>
<script type="text/javascript">
//兼容环境
function RandomKey(){
return "randomkey"+(RandomKey.idx++);
};
RandomKey.idx=0;
var websocket = null;
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
websocket = new WebSocket("ws://${pageContext.request.getServerName()}:${pageContext.request.getServerPort()}${cp}/websocket");
}
else {
alert('当前浏览器 Not support websocket')
}
//连接发生错误的回调方法
websocket.onerror = function () {
alert("WebSocket连接发生错误");
};
//连接成功建立的回调方法
websocket.onopen = function () {
alert("WebSocket连接成功");
recopen();//打开录音
alert("录音打开成功");
}
//接收到消息的回调方法
websocket.onmessage = function (event) {
setMessageInnerHTML(event.data);
}
//连接关闭的回调方法
websocket.onclose = function () {
alert("WebSocket连接关闭");
}
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
closeWebSocket();
}
//将消息显示在网页上
function setMessageInnerHTML(message) {
if (message!=null) {
document.getElementById('message').innerHTML +='<audio src="${cp}/'+ message + '" controls="controls">'+'</audio>'+'</br>';
}
}
//关闭WebSocket连接
function closeWebSocket() {
websocket.close();
recclose()//关闭录音
}
//发送消息
function send() {
var message = document.getElementById('text').value;
websocket.send(message);
}
</script>
<script>
var rec;
function recopen(){
var type="mp3";//mp3或wav
var bit=+16;//比特率
var sample=+16000;//采样率
rec=Recorder({
type:type
,bitRate:bit
,sampleRate:sample
});
rec.open()
};//打开录音设备
function recclose(){
if(rec){
rec.close();
}
};//关闭录音设备
function recstart(){
if(rec){
rec.start();//开始录音
};
$("#VoiceMessage").val("松开 结束");
};//开始录音
var recblob={};
function recstop(call){
if(rec){
rec.stop(function(blob,time){
var id=RandomKey(16);
recblob[id]={blob:blob,set:$.extend({},rec.set),time:time};//生成的录音对象
recdown64(id);
},function(s){});
};
$("#VoiceMessage").val("按住 说话");
};
//录音结束,生成base64
function recdown64(key){
var o=recblob[key];
var reader = new FileReader();
reader.readAsDataURL(o.blob);
reader.onloadend = function() {
var Object={};
Object.messageBase64=reader.result;
Object.from_id=1;
Object.to_id=2;
$.ajax({
async : false, //设置同步
type : 'POST',
url : '${cp}/uploadmp3.do',
data :Object,
dataType : 'json',
success : function(resoult) {
websocket.send(resoult.resoult);
},
error : function(resoult) {
alert("4444444444444");
}
});
};
};
</script>
</html>2websocket代码
这里用的直接是狼哥的代码，刚兴趣的可以去看一下上文的链接
@ServerEndpoint("/websocket")
public class WebSocketTestOne {
//静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
private static int onlineCount = 0;
//concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识
private static CopyOnWriteArraySet<WebSocketTestOne> webSocketSet = new CopyOnWriteArraySet<WebSocketTestOne>();
//与某个客户端的连接会话，需要通过它来给客户端发送数据
private Session session;
/**
* 连接建立成功调用的方法
* @param session 可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据
*/
@OnOpen
public void onOpen(Session session){
this.session = session;
webSocketSet.add(this); //加入set中
addOnlineCount(); //在线数加1
System.out.println("有新连接加入！当前在线人数为" + getOnlineCount());
}
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose(){
webSocketSet.remove(this); //从set中删除
subOnlineCount(); //在线数减1
System.out.println("有一连接关闭！当前在线人数为" + getOnlineCount());
}
/**
* 收到客户端消息后调用的方法
* @param message 客户端发送过来的消息
* @param session 可选的参数
*/
@OnMessage
public void onMessage(String message, Session session) {
System.out.println("来自客户端的消息:" + message);
//群发消息
for(WebSocketTestOne item: webSocketSet){
try {
item.sendMessage(message);
} catch (IOException e) {
e.printStackTrace();
continue;
}
}
}
/**
* 发生错误时调用
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error){
System.out.println("发生错误");
error.printStackTrace();
}
/**
* 这个方法与上面几个方法不一样。没有用注解，是根据自己需要添加的方法。
* @param message
* @throws IOException
*/
public void sendMessage(String message) throws IOException{
this.session.getAsyncRemote().sendText(message);
}
public static synchronized int getOnlineCount() {
return onlineCount;
}
public static synchronized void addOnlineCount() {
WebSocketTestOne.onlineCount++;
}
public static synchronized void subOnlineCount() {
WebSocketTestOne.onlineCount--;
}
}3后台代码
@RequestMapping("/uploadmp3")
@ResponseBody
public Map<String,Object> UpLoadMp3(String messageBase64,int from_id,int to_id, HttpSession session){
String destPath=session.getServletContext().getRealPath("TapeTest/mp3");
String base64 = messageBase64.replace("data:audio/mp3;base64,","");
Date date = new Date();
SimpleDateFormat dateFormat= new SimpleDateFormat("yyyy_MM_dd_hh_mm_ss");
SimpleDateFormat dateFormat2= new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
String date2=dateFormat2.format(date);//
String date1=dateFormat.format(date);//date转string,没空格
String fileName="aaa"+from_id+date1+to_id+"tape.mp3";
Base64Utils.base64ToFile(destPath,base64,fileName);
Map<String,Object> resoult = new HashMap<String,Object>();
String Path="TapeTest/mp3/"+fileName;
String content="##data:audio/mp3;base64,*&password:32425$#*&";//作为识别，是否是语音文件
messageService.addMessageTape(from_id,to_id,Path,date2,content);
resoult.put("resoult",Path);
return resoult;
}3运行效果
