html页面显示websocket推送的数据

最近的工作是要做一个前端页面，然后websocket会推送相关的数据过来，然后展示在页面上，没办法，只能把前端知识捡起来，一步步摸索了

要做的是一个机器人的人机交互页面，人机对话数据要实时显示在input框里

scritp代码：

 <script type="text/javascript">

    // 打开一个WebSocket:
    var ws = new WebSocket('ws://127.0.0.1:12340/chat');
    
    //open event
    ws.onopen = function() {
    
    
        console.log("open websocket...");
    };
    
    //close event
    ws.onclose = function() {
    
    
        console.log("close websocket...");
    };
    
    // 响应onmessage事件:
    ws.onmessage = function(msg) {
    
     
        //这里可以处理接收到服务器的数据
    
        console.log(msg); 
        var text=msg.data;
        //alert(text);
       // document.getElementById("foot").innerHTML=text;
       document.getElementById("input1").value=text;
    };
    
    function ws_send(){
    
    
        // 给服务器发送一个数字
        ws.send(document.getElementById('input_msg').value);
        
    }
    </script>
   

页面输入框代码：

 <input id="input1" type="text" class="form-control" placeholder="您可以对我说:上一页、下一页、第三个、退出" aria-describedby="basic-addon2">

成功显示在输入框里：

能把websocket数据显示出来了，后续就是要处理的前端的字符串显示了。

另外，在给input框放值的时候，一开始还走了弯路，我用的innerHTML，结果没有放进去

关于value与innerHTML的区别和innerText

要注意：
有value属性的标签才能使用getElementById().value
比如< input type=“text” value="" />
像 < div >12345 < /div>这种没有value属性的标签就用getElementById().innerHTML
对于表单控件，都可以用value属性，对于非表单控件，可以用innerHTML
input标签都有value属性，但都没有innerHtml属性，所以只能用value；
select标签和option标签，既有innerHTML属性也有value属性，但是一个是取回文本，一个是取回值，这两个有可能不同（比如0、1代替男、女）具体要看需要用到哪个值，具体分析
另外textarea文本域没有innerHTML属性，有value和innerText属性。

参考自：（作者：hello大象
链接：https://www.jianshu.com/p/6d55aa0de433
）