Websocket的使用(前端使用JS 后端是用Java)

最新推荐文章于 2024-08-23 10:31:20 发布

没有腹肌的程序猿

最新推荐文章于 2024-08-23 10:31:20 发布

阅读量1k

点赞数 1

分类专栏： Java 前端 JS 文章标签： websocket

本文链接：https://blog.csdn.net/weixin_41998715/article/details/115694928

版权

Java 同时被 3 个专栏收录

28 篇文章 2 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

需求:通过电话设备接收到的语音通过websocket传输到Java服务端,服务端接收到再请求阿里云的语音识别接口

由于功能还未完全实现,文章会持续更新,喜欢可以收藏一下,同时也欢迎对这方面有兴趣的程序猿一起讨论更优的解决方案

1.首先是开发服务端,创建一个websocket,实现前后端的数据流传输.


import org.springframework.stereotype.Component;

import com.aliRealTimeAsr.util.StreamToAli;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.ServerSocket;

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/Ali")
@Component
public class WebSocketServer {
	 //static Log log=LogFactory.get(WebSocketServer.class);
	static int temp = 0;
	StreamToAli smAli = null;
	    /**与某个客户端的连接会话，需要通过它来给客户端发送数据*/
	    private Session session;
	    /**
	     * 连接建立成功调用的方法*/
	    @OnOpen
	    public void onOpen() {
	        try {
	            System.out.println(("连接成功!"));
	            
	        } catch (Exception e) {
	        	System.out.println("网络异常!!!!!!");
	        }
	    }


	    /**
	     * 连接关闭调用的方法
	     */
	    @OnClose
	    public void onClose() {
	    	System.out.println("关闭成功!");
	    }

	    /**
	     * 收到客户端消息后调用的方法
	     *
	     * @param message 客户端发送过来的消息
	     * @throws FileNotFoundException */
	    @OnMessage
	    public void onMessage(String message, Session session) throws FileNotFoundException {
	    	
	        System.out.println(message);

	    }

	    @OnError
	    public void onError(Session session, Throwable error) {
	        error.printStackTrace();
	    }

}

后端编写好之后就是编写前端代码,实现互连

<script>
 	var socket;
    function openSocket() {
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else{
            console.log("您的浏览器支持WebSocket");
            var socketUrl="http://localhost:8888/Ali";
            socketUrl=socketUrl.replace("https","ws").replace("http","ws");
            console.log(socketUrl);

            socket = new WebSocket(socketUrl);
            //打开事件
            socket.onopen = function() {
                console.log("websocket已打开");
                alert("websocket已打开");
                //socket.send("这是来自客户端的消息" + location.href + new Date());
            };
            //获得消息事件
            socket.onmessage = function(msg) {
                console.log(msg.data);
                //发现消息进入    开始处理前端触发逻辑
            };
            //关闭事件
            socket.onclose = function() {
                console.log("websocket已关闭");
            };
            //发生了错误事件
            socket.onerror = function() {
                console.log("websocket发生了错误");
            }
        }
    }

    function closeSocket(){
        //关闭事件
        if(socket!=null){
            socket.close();
            socket=null;
            alert("Socket已关闭！")
        }else {
            alert("未建立Socket！")
        }
    }
    function sendMessage() {
		
       socket.send(".......................音频流文件");

    }
</script>
<body>

<p>（接通电话的时候执行）：<div><a onclick="openSocket()">开启socket</a></div>
<p>（data有值的时候 循环传入）：<div><a onclick="sendMessage()">发送音频流</a></div>
<p>(当电话挂断的时候执行)：<div><a onclick="closeSocket()">关闭socket</a></div>

</body>