随意开发一个websocket通信DEMO

随意开发一个websocket通信DEMO

示例：

连接一个免费的ws测试服务来演示此项功能，HeartBeat为心跳连接

ws://123.207.136.134:9010/ajaxchattest

希望各位小伙伴多多点赞收藏转发

源码给上：

HTML

<div>
			<h1>WebSocket 通信</h1>
			<div>
				<div>
					<textarea rows="6" id="sendMsg" style="width: 100%;"></textarea>
				</div>
				<div>
					<div>
						<button type="button" onkeydown="sendMsg()" onclick="sendMsg()">发送</button>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col">
					<div></div>
					<div>
						<div id="chartRoom">
							<p>本机发送消息：<span id="receivedMsg"></span></p>
							<p>服务器返回消息：<span id="getMsg"></span></p>
							<a href="javascript:;" onclick="refreshConnect()" role="button">刷新连接</a>
							<hr>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
		<script src="./static/js/websocket.js"></script>

JS

var os = require("os");
var websoketArray = [];
if (typeof module === 'object') {
	window.jQuery = window.$ = module.exports;
};
$(function() {
	startConnect();
});

function startConnect() {
	websoketArray.push(new createWebsocket("ws://123.207.136.134:9010/ajaxchattest"));
}
function createWebsocket(url) {
	var heartCheck = {
		timeout: 3000,
		timeoutObj: null,
		reset: function() {
			clearTimeout(this.timeoutObj);
			this.start();
		},
		start: function() {
			this.timeoutObj = setTimeout(function() {
				ws.send("HeartBeat");
			}, this.timeout)
		}
	}
	var ws = new WebSocket(url);
	ws.onopen = (event) => {
		console.log("已成功连接ws服务");
		$("#chartRoom").append("<p>与 " + url + " 建立连接--成功</p>");
		heartCheck.start();
	}
	ws.onmessage = (event) => {
		console.log(event);
		console.log(event.data);
		if (!event.data.includes("HeartBeat")) {
			$("#getMsg").html(event.data);
		} else {
			heartCheck.reset();
		}
	}
	ws.onclose = function(event) {
		console.log(url + "连接已关闭...");
		clearTimeout(heartCheck.timeoutObj);
	}
	ws.onerror = function(event) {
		$("#chartRoom").append("<p>与 " + url + " 建立连接--失败</p>");
		ws.close();
		websoketArray.splice(websoketArray.indexOf(ws), 1);
		console.log(url + "连接已关闭");
		setTimeout(function() {
			startConnect();
		}, 3000);
	}
	return ws;
}

function sendMsg() {
	var msg = $("#sendMsg").val();
	if (!msg) {
		return;
	}
	$("#receivedMsg").html(msg);
	if (msg !== "" && msg !== undefined) {
		for (var i = 0; i < websoketArray.length; i++) {
			websoketArray[i].send(msg);
			$("#sendMsg").val(null);
		}
	}
}

function refreshConnect() {
	for (var i = 0; i < websoketArray.length; i++) {
		websoketArray[i].close();
	}
	setTimeout(function() {
		startConnect();
	}, 3000);
}