add ws_server_online support wss

zhaomingwork

2023-05-15 00de4511009a7fbbb88142b2b2a0faeaa0e3e7d9

add ws_server_online support wss

 funasr/runtime/html5/readme.md

@@ -17,9 +17,15 @@
### demo页面如下

![img](https://github.com/alibaba-damo-academy/FunASR/blob/for-html5-demo/funasr/runtime/html5/demo.gif)



## 具体数据流向：

浏览器https麦克风 --> html5 demo服务 --> js wss接口 --> nginx服务 --> ws asr online srv



## 两种ws_server_online连接模式

### 1)直接连接模式，浏览器https麦克风 --> html5 demo服务 --> js wss接口 --> wss asr online srv(证书生成请往后看)

```shell

python ws_server_online.py --certfile server.crt --keyfile server.key  --port 5921

```

### 2)nginx中转，浏览器https麦克风 --> html5 demo服务 --> js wss接口 --> nginx服务 --> ws asr online srv

```shell

python ws_server_online.py  --port 5921

```

## 1.html5 demo服务启动

### 启动html5服务，需要ssl证书(自己生成请往后看)



@@ -28,17 +34,15 @@
                   [--keyfile KEYFILE]

python h5Server.py --port 1337

```

## 2.启动ws asr online srv

## 2.启动ws or wss asr online srv

[具体请看online asr](https://github.com/alibaba-damo-academy/FunASR/tree/main/funasr/runtime/python/websocket)

目前online asr只提供ws接口，需要通过nginx将wss转发到该online asr端口上

online asr只提供两种ws和wss模式，wss模式可以直接启动，无需nginx中转。否则需要通过nginx将wss转发到该online asr的ws端口上



## 3.修改wsconnecter.js里asr接口地址

wsconnecter.js里配置online asr服务地址路径，这里配置的是nginx的wss端口

wsconnecter.js里配置online asr服务地址路径，这里配置的是wss端口

var Uri = "wss://xxx:xxx/" 



## 4.配置nginx并启动



## 5.浏览器打开地址测试

## 4.浏览器打开地址测试

https://127.0.0.1:1337/static/index.html






 funasr/runtime/html5/static/main.js

@@ -59,6 +59,7 @@
    } else if ( connState === 2 ) {

        stop();

        console.log( 'connecttion error' );

        setTimeout(function(){btnStart.disabled = true;info_div.innerHTML='connecttion error';}, 4000 );

    }

}




 funasr/runtime/html5/static/wsconnecter.js

@@ -72,6 +72,7 @@
    }

    

    function onError( e ) {

        info_div.innerHTML="连接"+e;

        console.log(e);

        stateHandle(2);

    }


 funasr/runtime/python/websocket/ws_server_online.py

@@ -7,7 +7,7 @@
import logging
import tracemalloc
import numpy as np

import ssl
from parse_args import args
from modelscope.pipelines import pipeline
from modelscope.utils.constant import Tasks
@@ -94,7 +94,16 @@
                await websocket.send(message)


if len(args.certfile)>0:
  ssl_context = ssl.SSLContext(ssl.PROTOCOL_TLS_SERVER)

  # Generate with Lets Encrypt, copied to this location, chown to current user and 400 permissions
  ssl_cert = args.certfile
  ssl_key = args.keyfile

  ssl_context.load_cert_chain(ssl_cert, keyfile=ssl_key)
  start_server = websockets.serve(ws_serve, args.host, args.port, subprotocols=["binary"], ping_interval=None,ssl=ssl_context)
else:
start_server = websockets.serve(ws_serve, args.host, args.port, subprotocols=["binary"], ping_interval=None)
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()