https://www.cnblogs.com/IT-Evan/p/15208070.html
<script>

var es = new EventSource("/McuToHtml");

//֮ͻ
es .addEventListener('open',function(){
console.info('open');
},false);

//ͻ˷ݵĬ¼ͨe.dataԻȡݣ
es .addEventListener('message',function(e){
console.info('message',e.data);
},false);

//Զ¼SSE֧Զ¼
es .addEventListener('foo',function(e){
console.info('foo',e.data);
},false);

//ӷʱ
es .addEventListener('error',function(){
console.info('error');
},false);

</script>


esp32 

esp_err_t McuToHtml_handler(httpd_req_t *req)
{
	httpd_resp_set_type(req, "text/event-stream;charset=utf-8");

	 /* \nһַbuf_lenҪ\n */
	httpd_resp_send(req, "data:test\n\n",11);//data: ͷĬϴҳmessage¼\n\nβһ͡

	httpd_resp_send(req, "event:foo\ndata:test\n\n",21);//'event:' + ¼ + '\n'ͻᴥҳеfoo¼message¼\n\nβһ͡

	return ESP_OK;
}


httpd_uri_t McuToHtml = {
	.uri = "/McuToHtml",
	.method = HTTP_GET,
	.handler = McuToHtml_handler,
	.user_ctx = NULL
};


    <select id="TimedMode" onchange="TimedModeToMCU()">
        <option value='' disabled selected hidden>--ѡģʽ--</option>
        <option value=1>ʱģʽ</option>
        <option value=2>ʱѭؿ</option>
        <option value=3>ʱ</option>
        <option value=4>ʱ</option>
    </select>

    <div id="CountDown">
        <h4>ʱģʽ</h4>
        <div id="CountDownOff">
            <h5>أ
            <input type="number" id="CountDownOffHour" value=0 min="0" max="23" step="1" oninput="if(value>23)value=23;if(value<0)value=0" required>
            ʱ
            <input type="number" id="CountDownOffmin" value=0 min="0" max="59" step="1" oninput="if(value>59)value=59;if(value<0)value=0" required>
            
            <input type="number" id="CountDownOffsec" value=0 min="0" max="59" step="1" oninput="if(value>59)value=59;if(value<0)value=0" required>
            <font size=0 color="red">(ȫ0һֱ)</font>
            </h5>
        </div>

        <div id="CountDownOn">
            <h5>
            <input type="number" id="CountDownOnHour" value=23 min="0" max="23" step="1" oninput="if(value>23)value=23;if(value<0)value=0" required>
            ʱ
            <input type="number" id="CountDownOnmin" value=59 min="0" max="23" step="1" oninput="if(value>23)value=23;if(value<0)value=0" required>
            
            <input type="number" id="CountDownOnsec" value=59 min="0" max="23" step="1" oninput="if(value>23)value=23;if(value<0)value=0" required>
            <font size=0 color="red">(ȫ0һֱ)</font>
            </h5>
        </div>
        <input type="button" id="CountDown_onoff" value=''>
    </div>

    <div id="Timed">
        <h4>ʱģʽ&emsp;&emsp;ǰʱ:&emsp;
        <select ID="set_weed">
            <option value='' disabled selected hidden>--ѡ--</option>
            <option value=0></option>
            <option value=1>һ</option>
            <option value=2>ڶ</option>
            <option value=3></option>
            <option value=4></option>
            <option value=5></option>
            <option value=6></option>
        </select>
        <input type="time" step="1" ID="set_time" value=''>
        <input type="button" ID="set_weed_time" value="ʱ">
        </h4>

        <table border="1">
            <tr>
                <th></th><th></th><th>һ</th><th>ڶ</th><th></th><th></th><th></th><th></th>
            </tr>
            <tr>
                <th width="35">״̬</th>
                <th><input type="button" id="Sunday" style="width:120" value=''></th>
                <th><input type="button" id="Monday" style="width:120" value=''></th>
                <th><input type="button" id="Tuesday" style="width:120" value=''></th>
                <th><input type="button" id="Wednesday" style="width:120" value=''></th>
                <th><input type="button" id="Thursday" style="width:120" value=''></th>
                <th><input type="button" id="Friday" style="width:120" value=''></th>
                <th><input type="button" id="Saturday" style="width:120" value=''></th>
            </tr>
            <tr>
                <th>1</th>
                <th><span onclick="document.getElementById('time1').value=''"></span><input type="time" step="1" ID="time1">  <span onclick="document.getElementById('time2').value=''"></span><input type="time" step="1" ID="time2"></th>
                <th><span onclick="document.getElementById('time3').value=''"></span><input type="time" step="1" ID="time3">  <span onclick="document.getElementById('time4').value=''"></span><input type="time" step="1" ID="time4"></th>
                <th><span onclick="document.getElementById('time5').value=''"></span><input type="time" step="1" ID="time5">  <span onclick="document.getElementById('time6').value=''"></span><input type="time" step="1" ID="time6"></th>
                <th><span onclick="document.getElementById('time7').value=''"></span><input type="time" step="1" ID="time7">  <span onclick="document.getElementById('time8').value=''"></span><input type="time" step="1" ID="time8"></th>
                <th><span onclick="document.getElementById('time9').value=''"></span><input type="time" step="1" ID="time9">  <span onclick="document.getElementById('time10').value=''"></span><input type="time" step="1" ID="time10"></th>
                <th><span onclick="document.getElementById('time11').value=''"></span><input type="time" step="1" ID="time11"> <span onclick="document.getElementById('time12').value=''"></span><input type="time" step="1" ID="time12"></th>
                <th><span onclick="document.getElementById('time13').value=''"></span><input type="time" step="1" ID="time13"> <span onclick="document.getElementById('time14').value=''"></span><input type="time" step="1" ID="time14"></th>
            </tr> 
        </table>
    </div>

    <hr color="red"/>