js 链接websocket马上断开_自制WebSocket测试工具(前端篇)

导读

    小编昨天花了一个小时自制了一个WebSocket测试小工具，和网络上搜索到的在线工具类似，可以实现WebSocket的连接、断开和发送等功能，同时还加上了一些颜色来区别。那么我们先来看看效果吧，这里展示的是实时日志功能。

    此篇文章仅展示前端代码(代码部分请左右滑动查看)。

代码部分

    看完效果之后话不多说直接上WebSocket核心代码,通常分为连接、接收、发送、异常、关闭连接五个模块。以下是伪代码：

if ("WebSocket" in window){  try{    websocket = new WebSocket(wsUrl)  }catch(err){    ....  }}else{  alert("您的浏览器不支持 WebSocket!");  return;}//连接发生错误的回调方法websocket.onerror = function () {  ....};//连接成功建立的回调方法websocket.onopen = function () {  ....}//接收到消息的回调方法websocket.onmessage = function (event) {  ....}//连接关闭的回调方法websocket.onclose = function () {  ....}//发送消息websocket.send = function () {  ...}

    结合简单的html、css、js即可完成小工具，由于小编非专业前端，还请见谅，具体代码如下:

    iFillDream-WebSocket小工具      #bq {      height: 40px;      line-height: 40px;      position: fixed;      bottom: 0;      width: 100%;      text-align: center;      color: #fff;      font-family: Arial;      font-size: 12px;      letter-spacing: 1px;    }              连接  断开  用例        发送              当前连接地址：    

欢迎搜索微信公众号:iFillDream 版权所有:©2020 iFillDream Corporation. All rights reserved.

var websocket = null; var wsUrl = null; var tempUrl = null; if ("WebSocket" in window) { document.getElementById('message').innerHTML = '您的浏览器支持 WebSocket!
'; }else{ alert("您的浏览器不支持 WebSocket!"); } //将消息显示在网页上 function setMessageInnerHTML(innerHTML) { console.log(innerHTML); document.getElementById('message').innerHTML += innerHTML + '
'; window.scrollTo(0, document.body.scrollHeight) } //关闭WebSocket连接 function closeWebSocket() { websocket.close(); } //发送消息 function send() { var message = document.getElementById('text').value; if(message == null || message == undefined || message == ''){ document.getElementById('message').innerHTML += '发送内容不能为空
'; } websocket.send(message); } //测试用例 function testDemo() { document.getElementById('wsUrl2').value='ws://echo.websocket.org'; setWsUrl(); } //设置WebSocket链接地址 function setWsUrl() { document.getElementById('message').innerHTML = '清空屏幕成功
'; if( websocket != null ){ temp = wsUrl; websocket.close(); document.getElementById('message').innerHTML += '已关闭之前的WebSocket:' + temp +'
'; } wsUrl = document.getElementById('wsUrl2').value; document.getElementById('nowUrl').innerText=wsUrl if ("WebSocket" in window) { try{ websocket = new WebSocket(wsUrl) }catch(err){ document.getElementById('message').innerHTML = "WebSocket连接发生错误:" + err + "
"; } }else{ alert("您的浏览器不支持 WebSocket!"); return; } //连接发生错误的回调方法 websocket.onerror = function () { document.getElementById('message').innerHTML = 'WebSocket连接发生错误' + wsUrl + '
'; setMessageInnerHTML("WebSocket连接发生错误"+ wsUrl + '
'); }; //连接成功建立的回调方法 websocket.onopen = function () { setMessageInnerHTML("WebSocket连接成功:" + wsUrl + '
'); } //接收到消息的回调方法 websocket.onmessage = function (event) { setMessageInnerHTML(event.data); } //连接关闭的回调方法 websocket.onclose = function () { setMessageInnerHTML("WebSocket连接关闭"); } } //此方法只针对input框 function copyText(id){ var o=document.getElementById(id); o.select(); // 选择对象 document.execCommand("Copy");//复制 document.getElementById('message').innerHTML += '已复制:' + wsUrl + '
'; } //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。 window.onbeforeunload = function () { closeWebSocket(); }

    好了，到此就全部结束了,您学废了嘛。这里仅仅展示了实时日志的功能，WebSocket其实还有更多的玩法等你来探索。为此小编提供了线上版本，详细地址请点击阅读原文查看。

【更多精彩】

Java微信解密算法

脚本搭建Nginx、Redis、MySql、Maven