webSocket 本地模拟
2022-01-05 本文已影响0人
哼_
先上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>websocket</title>
</head>
<body>
</body>
<script>
var socket = null
// WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
var url = 'ws://IP:端口号/文件/websocket/id'
socket = new WebSocket(url);
console.log(socket, 'socket 实例----')
socket.onopen = function(){
console.log('连接上了')
socket.send([1,2,3,4])// 由于后端的信息是项目固定的, 不是前端传递什么, 返回什么, 所以 打印的event.data 是协商的内容
}
socket.onmessage = function(event){
console.log('传递的信息')
console.log(event)
}
</script>
</html>
image.png
websocket 还有很多其他的方法
<!DOCTYPE html>
<meta charset="utf-8" />
<title>WebSocket Test</title>
<script language="javascript"type="text/javascript">
var wsUri ="ws://IP:端口号/文件/websocket/id";
var output;
function init() {
output = document.getElementById("output");
testWebSocket();
}
function testWebSocket() {
websocket = new WebSocket(wsUri);
websocket.onopen = function(evt) {
onOpen(evt)
};
websocket.onclose = function(evt) {
onClose(evt)
};
websocket.onmessage = function(evt) {
onMessage(evt)
};
websocket.onerror = function(evt) {
onError(evt)
};
}
function onOpen(evt) {
writeToScreen("连接上了");
doSend("WebSocket rocks");
}
function onClose(evt) {
writeToScreen("close");
}
function onMessage(evt) {
writeToScreen('<span style="color: blue;">response: '+ evt.data+'</span>');
websocket.close();
}
function onError(evt) {
writeToScreen('<span style="color: red;">error:</span> '+ evt.data);
}
function doSend(message) {
writeToScreen("send: " + message);
websocket.send(message);
}
function writeToScreen(message) {
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML = message;
output.appendChild(pre);
}
window.addEventListener("load", init, false);
</script>
<h2>WebSocket Test</h2>
<div id="output"></div>
</html>
