1参考资料
websocket参考博客 https://www.cnblogs.com/xdp-gacl/p/5193279.html
2主要的思路
将录音生成的blob对象转成base64,然后通过ajax传到后台,将base64转成文件进行上传将文件地址发回前台。前台在将音频地址发到websocket服务端,websocket服务端再将音频地址发回给客户端,
3项目示例
pom.xml中添加Jar包依赖
2 javax
3 javaee-api
4 7.0
5 provided
6
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"%>
Java后端WebSocket的Tomcat实现
<%--begin--%>
2websocket代码
这里用的直接是狼哥的代码,刚兴趣的可以去看一下上文的链接
@ServerEndpoint("/websocket")
public class WebSocketTestOne {
//静态变量,用来记录当前在线连接数。应该把它设计成线程安全的。
private static int onlineCount = 0;
//concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话,可以使用Map来存放,其中Key可以为用户标识
private static CopyOnWriteArraySet webSocketSet = new CopyOnWriteArraySet();
//与某个客户端的连接会话,需要通过它来给客户端发送数据
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 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 resoult = new HashMap();
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运行效果