1<html> 2 <head> 3 <style> 4* { 5 font-family: sans-serif; 6} 7 8label { 9 display: block; 10} 11 12input, label { 13 margin: .4rem 0; 14} 15 </style> 16 </head> 17 <body> 18 Server Port <input id="port" type="text" value="8989"></input> <button onclick="connect()">Connect</button><br> 19 AT Command <input type="text" id="at_command" required size="10"> <button onclick="send_at_command()">Send</button><br> 20 Dial Phone Number <input type="text" id="dial_number" required size="10"> <button onclick="dial()">Dial</button><br> 21 <button onclick="answer()">Answer</button> 22 <button onclick="hangup()">Hang Up</button> 23 <button onclick="start_voice_assistant()">Start Voice Assistant</button> 24 <button onclick="stop_voice_assistant()">Stop Voice Assistant</button> 25 <hr> 26 <div id="socketState"></div> 27 <script> 28 let portInput = document.getElementById("port") 29 let atCommandInput = document.getElementById("at_command") 30 let dialNumberInput = document.getElementById("dial_number") 31 let socketState = document.getElementById("socketState") 32 let socket 33 34 function connect() { 35 socket = new WebSocket(`ws://localhost:${portInput.value}`); 36 socket.onopen = _ => { 37 socketState.innerText = 'OPEN' 38 } 39 socket.onclose = _ => { 40 socketState.innerText = 'CLOSED' 41 } 42 socket.onerror = (error) => { 43 socketState.innerText = 'ERROR' 44 console.log(`ERROR: ${error}`) 45 } 46 } 47 48 function send(message) { 49 if (socket && socket.readyState == WebSocket.OPEN) { 50 socket.send(JSON.stringify(message)) 51 } 52 } 53 54 function send_at_command() { 55 send({ type:'at_command', command: atCommandInput.value }) 56 } 57 58 function answer() { 59 send({ type:'at_command', command: 'ATA' }) 60 } 61 62 function hangup() { 63 send({ type:'at_command', command: 'AT+CHUP' }) 64 } 65 66 function dial() { 67 send({ type:'at_command', command: `ATD${dialNumberInput.value}` }) 68 } 69 70 function start_voice_assistant() { 71 send(({ type:'at_command', command: 'AT+BVRA=1' })) 72 } 73 74 function stop_voice_assistant() { 75 send(({ type:'at_command', command: 'AT+BVRA=0' })) 76 } 77</script> 78 </body> 79</html>