| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>WebSocket消息通知</title>
- </head>
- <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
- <script>
- var socket;
- //打开WebSocket
- function openSocket() {
- if (typeof (WebSocket) === "undefined") {
- console.log("您的浏览器不支持WebSocket");
- } else {
- console.log("您的浏览器支持WebSocket");
- //实现化WebSocket对象,指定要连接的服务器地址与端口,建立连接.
- let socketUrl = location.origin + "/websocket";
- //将https与http协议替换为ws协议
- socketUrl = socketUrl.replace("https", "ws").replace("http", "ws");
- console.log(socketUrl);
- if (socket != null) {
- socket.close();
- socket = null;
- }
- socket = new WebSocket(socketUrl);
- //打开事件
- socket.onopen = function () {
- console.log("WebSocket已打开");
- //socket.send("这是来自客户端的消息" + location.href + new Date());
- };
- //获得消息事件
- socket.onmessage = function (msg) {
- try {
- //发现消息进入,开始处理前端触发逻辑
- var data = JSON.parse(msg.data);
- if ([10101, 10102, 10103, 10104].indexOf(data.cmd) === -1) {
- console.log("收到消息:",msg.data);
- }
- } catch (error) {
- console.log(error);
- }
- };
- //关闭事件
- socket.onclose = function () {
- console.log("WebSocket已关闭");
- };
- //发生了错误事件
- socket.onerror = function () {
- console.log("WebSocket发生了错误");
- }
- }
- }
- //发送消息
- function sendMessage() {
- if (typeof (WebSocket) === "undefined") {
- console.log("您的浏览器不支持WebSocket");
- } else {
- var data = $("#dataId").val();
- console.log("发送数据:", data);
- socket.send(data);
- }
- }
- function closeSocket() {
- if (typeof (WebSocket) === "undefined") {
- console.log("您的浏览器不支持WebSocket");
- } else {
- console.log("WebSocket已经关闭");
- if (socket != null) {
- socket.close();
- socket = null;
- }
- }
- }
- </script>
- <body>
- <div>
- <button onclick="openSocket()">开启socket</button>
- <button onclick="closeSocket()">关闭socket</button>
- </div>
- <div>
- <label for="dataId">发送数据</label>
- <input id="dataId" name="uid" type="text" value='{"cmd":20202,"data":{"tvmNo":"5","state":1}}' style="width: 500px;">
- </div>
- <div>
- <button onclick="sendMessage()">发送消息</button>
- </div>
- <!--<div>-->
- <!-- <label for="messageId">接受数据</label>-->
- <!-- <input id="messageId" name="msg" type="text" value="hello WebSocket2"></div>-->
- <!--</body>-->
- </html>
|