JavaScript笔记-前端原生态WebSocket的使用
Posted IT1995
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript笔记-前端原生态WebSocket的使用相关的知识，希望对你有一定的参考价值。
运行截图如下：
输入数据点击发送：
源码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket</title>
</head>
<body>
<h1>Echo Test</h1>
<input id="sendTxt" type="text" />
<button id="sendBtn">发送</button>
<div id="recv"></div>
<script type="text/javascript">
let websocket = new WebSocket("ws://82.157.123.54:9010/ajaxchattest");
websocket.onopen = function () {
console.log('websocket open');
document.getElementById("recv").innerText = "Connected";
}
websocket.onclose = function () {
console.log('websocket close');
}
websocket.onmessage = function (ev) {
console.log(ev.data);
document.getElementById("recv").innerHTML = ev.data;
}
document.getElementById("sendBtn").onclick = function () {
let txt = document.getElementById("sendTxt").value;
console.log(txt);
websocket.send(txt);
}
</script>
</body>
</html>这个地址：
ws://82.157.123.54:9010/ajaxchattest是网上随意找的。
以上是关于JavaScript笔记-前端原生态WebSocket的使用的主要内容，如果未能解决你的问题，请参考以下文章
前端笔记 11：使用Web Components进行原生组件化开发
如何直接从原生 JavaScript 前端与 Emscripten Web Worker 交互
前端强大的javascript原生选择器querySelector 和 querySelectorAll