最近的工作是要做一个前端页面,然后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
)