为了测试websocket, 根据网上的一些工具修改了一些, 因此得到了这个工具

源码

源码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>websocket在线测试工具</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://blog-static.cnblogs.com/files/lczmx/websocket_tool.min.css" rel="stylesheet">

    <style>

    </style>

</head>

<body>

<div class="well socketBody">

    <div class="socketTop">

        <div class="socketTopColLeft">

            <div class="btn-group socketSelect">

                <button type="button" class="btn btn-default dropdown-toggle socketSelectBtn" data-toggle="dropdown"

                        aria-expanded="false">

                    <span class="showHeadWS">WS</span>

                    <span class="caret"> </span>

                </button>

                <ul class="dropdown-menu socketSelectshadow">

                    <li><a onclick="showWS('WS')">WS</a></li>

                    <li><a onclick="showWS('WSS')">WSS</a></li>

                </ul>

            </div>

        </div>

        <div class="socketTopColRight">

            <input type="text" list="typelist" class="form-control urlInput"

                   placeholder="请输入连接地址~  如: 127.0.0.1:8000/ws"

                   oninput="inputChange()">

            <datalist id="typelist" class="inputDatalist">

                <option>

                    <!-- 这里放默认ws地址 -->

                </option>

            </datalist>

        </div>

    </div>

    <div class="socketBG well" id="main"></div>

    <div class="socketBottom row">

        <div class="col-xs-8 socketTextareaBody">

            <textarea rows="5" cols="20" class="form-control socketTextarea" placeholder="请输入发送信息~"></textarea>

        </div>

        <div class="col-xs-2 socketBtnSendBody">

            <button type="button" class="btn btn-success socketBtnSend" onclick="sendBtn()">发送</button>

        </div>

        <div class="col-xs-2 socketBtnBody">

            <button type="button" class="btn btn-primary socketBtn" onclick="connectBtn()">连接</button>

            <button type="button" class="btn btn-info socketBtn" onclick="emptyBtn()">清屏</button>

            <button type="button" class="btn btn-warning socketBtn" onclick="closeBtn()">断开</button>

        </div>

    </div>

    <div class="alert alert-danger socketInfoTips" role="alert">...</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<script src="https://blog-static.cnblogs.com/files/lczmx/websocket_tool.min.js"></script>

</body>

</html>

在线例子

<!--@html-start-->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://blog-static.cnblogs.com/files/lczmx/websocket_tool.min.css" rel="stylesheet">

    <style>

    </style>

</head>

<body>

<div class="well socketBody">

    <div class="socketTop">

        <div class="socketTopColLeft">

            <div class="btn-group socketSelect">

                <button type="button" class="btn btn-default dropdown-toggle socketSelectBtn" data-toggle="dropdown"

                        aria-expanded="false">

                    <span class="showHeadWS">WS</span>

                    <span class="caret"> </span>

                </button>

                <ul class="dropdown-menu socketSelectshadow">

                    <li><a onclick="showWS('WS')">WS</a></li>

                    <li><a onclick="showWS('WSS')">WSS</a></li>

                </ul>

            </div>

        </div>

        <div class="socketTopColRight">

            <input type="text" list="typelist" class="form-control urlInput"

                   placeholder="请输入连接地址~  如: 127.0.0.1:8000/ws"

                   oninput="inputChange()">

            <datalist id="typelist" class="inputDatalist">

                <option>

                    <!-- 这里放默认ws地址 -->

                </option>

            </datalist>

        </div>

    </div>

    <div class="socketBG well" id="main"></div>

    <div class="socketBottom row">

        <div class="col-xs-8 socketTextareaBody">

            <textarea rows="5" cols="20" class="form-control socketTextarea" placeholder="请输入发送信息~"></textarea>

        </div>

        <div class="col-xs-2 socketBtnSendBody">

            <button type="button" class="btn btn-success socketBtnSend" onclick="sendBtn()">发送</button>

        </div>

        <div class="col-xs-2 socketBtnBody">

            <button type="button" class="btn btn-primary socketBtn" onclick="connectBtn()">连接</button>

            <button type="button" class="btn btn-info socketBtn" onclick="emptyBtn()">清屏</button>

            <button type="button" class="btn btn-warning socketBtn" onclick="closeBtn()">断开</button>

        </div>

    </div>

    <div class="alert alert-danger socketInfoTips" role="alert">...</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<script src="https://blog-static.cnblogs.com/files/lczmx/websocket_tool.min.js"></script>

</body>

</html>

<!--@html-end-->

<!--@css-start-->

/* 已经在link中引入并压缩了 */

<!--@css-end-->

<!--@javascript-start-->

/* 已经在script中引入并压缩了 */

<!--@javascript-end-->

webcode格式

这是我做备份的, 可以在博客园中渲染成想要的页面, 没有用js实现的话没有效果

<!--@html-start-->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://blog-static.cnblogs.com/files/lczmx/websocket_tool.min.css" rel="stylesheet">

    <style>

    </style>

</head>

<body>

<div class="well socketBody">

    <div class="socketTop">

        <div class="socketTopColLeft">

            <div class="btn-group socketSelect">

                <button type="button" class="btn btn-default dropdown-toggle socketSelectBtn" data-toggle="dropdown"

                        aria-expanded="false">

                    <span class="showHeadWS">WS</span>

                    <span class="caret"> </span>

                </button>

                <ul class="dropdown-menu socketSelectshadow">

                    <li><a onclick="showWS('WS')">WS</a></li>

                    <li><a onclick="showWS('WSS')">WSS</a></li>

                </ul>

            </div>

        </div>

        <div class="socketTopColRight">

            <input type="text" list="typelist" class="form-control urlInput"

                   placeholder="请输入连接地址~  如: 127.0.0.1:8000/ws"

                   oninput="inputChange()">

            <datalist id="typelist" class="inputDatalist">

                <option>

                    <!-- 这里放默认ws地址 -->

                </option>

            </datalist>

        </div>

    </div>

    <div class="socketBG well" id="main"></div>

    <div class="socketBottom row">

        <div class="col-xs-8 socketTextareaBody">

            <textarea rows="5" cols="20" class="form-control socketTextarea" placeholder="请输入发送信息~"></textarea>

        </div>

        <div class="col-xs-2 socketBtnSendBody">

            <button type="button" class="btn btn-success socketBtnSend" onclick="sendBtn()">发送</button>

        </div>

        <div class="col-xs-2 socketBtnBody">

            <button type="button" class="btn btn-primary socketBtn" onclick="connectBtn()">连接</button>

            <button type="button" class="btn btn-info socketBtn" onclick="emptyBtn()">清屏</button>

            <button type="button" class="btn btn-warning socketBtn" onclick="closeBtn()">断开</button>

        </div>

    </div>

    <div class="alert alert-danger socketInfoTips" role="alert">...</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<script src="https://blog-static.cnblogs.com/files/lczmx/websocket_tool.min.js"></script>

</body>

</html>

<!--@html-end-->

<!--@css-start-->

/* 已经在link中引入并压缩了 */

<!--@css-end-->

<!--@javascript-start-->

/* 已经在script中引入并压缩了 */

<!--@javascript-end-->

websocket在线测试工具的更多相关文章

  1. (转)3款优秀的移动webAPP网站在线测试工具

    原文:原文地址 目前适配各个终端的需求越来越强烈呢?比如我们APP项目上线之后,需要一个宣传推广专题页,这个页面当然最好是采取响应式布局来完成.因为需要来推广和下载我们的APP. 无论用户是电脑打开, ...

  2. nodejs+websocket聊天工具

    该聊天工具,使用nodejs起服务,websocket前端页面,聊天工具,,可以有任意多的人数参与聊天,里面的用户ID为模拟ID. 先上图 文件夹结构, 1.安装ws模块,npm install ws ...

  3. nodejs加WebSocket,聊天工具

    1.WebSocket必须要与服务器连接,所以这里采用node起服务,这里用到了ws,,也有人用nodejs-websocket 2.首先 npm install ws 3.新建一个server.js ...

  4. 用图解&&实例讲解php是如何实现websocket实时消息推送的

    WebSocket是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. 以前的推送技术使用 Ajax 轮询,浏览器需要不断地向服务器发送http请求来获取最新的数据,浪费很多的带 ...

  5. html5 websocket 示例，websocket在线聊天，php websocket实例

    WebSocket在线测试工具 http://ws.douqq.com/ 1.连接格式为 ws://IP/域名:端口(示例ws://119.29.3.36:5354) 2.对于内网的测试环境,只需填入 ...

  6. Spring Boot 集成 WebSocket 实现服务端推送消息到客户端

    假设有这样一个场景:服务端的资源经常在更新,客户端需要尽量及时地了解到这些更新发生后展示给用户,如果是 HTTP 1.1,通常会开启 ajax 请求询问服务端是否有更新,通过定时器反复轮询服务端响应的 ...

  7. sanic之websocket路由

    在某些时候,需要建立websocket路由,来建立长链接,来实时传输数据,就比如一些聊天应用,就有实时音视频,需要实时传出状态 在sanic框架中支持两种websocket路由方式,有一种是再app中 ...

  8. 借助FreeHttp任意篡改Websocket报文(Websocket改包)

    前言 作为Web应用中最常见的数据传输协议之一的Websocket,在我们日常工作中也势必会经常使用到,而在调试或测试中我们常常也有直接改变Websocket数据报文以确认其对应用的影响的需求,本文将 ...

  9. vue+websocket+express+mongodb实战项目（实时聊天）

    继上一个项目用vuejs仿网易云音乐(实现听歌以及搜索功能)后,发现上一个项目单纯用vue的model管理十分混乱,然后我去看了看vuex,打算做一个项目练练手,又不想做一个重复的项目,这次我就放弃颜 ...

随机推荐

  1. dbeaver可视化工具-连接clickhouse

    下载地址 https://dbeaver.io/download/ 本次下载的是ZIP包,这种方式方便移动/备份软件 此软件可连接多种数据库,这里是连接clickhouse 新建连接 点击 上面的倒三 ...

  2. C++ default constructor | Built-in types

    Predict the output of following program? 1 #include <iostream> 2 using namespace std; 3 4 int ...

  3. 使用 ACE 库框架在 UNIX 中开发高性能并发应用

    使用 ACE 库框架在 UNIX 中开发高性能并发应用来源:developerWorks 中国 作者:Arpan Sen ACE 开放源码工具包可以帮助开发人员创建健壮的可移植多线程应用程序.本文讨论 ...

  4. 2.7 Rust Structs

    A struct, or structure, is a custom data type that lets you name and package together multiple relat ...

  5. leetcode，两个排序数组的中位数

    先上题目描述: 给定两个大小为 m 和 n 的有序数组 nums1 和 nums2 . 请找出这两个有序数组的中位数.要求算法的时间复杂度为 O(log (m+n)) . 你可以假设 nums1 和  ...

  6. react功能实现-组件创建

    这里主要从两个角度来分析创建一个组件需要怎么做,一个是元素,一个是数据.整理向,大量借鉴,非原创. 1.渲染组件. 我们先明确一点,所有的元素都必须通过render方法来输出渲染.所有,每个组件类最终 ...

  7. A New Discrete Particle Swarm Optimization Algorithm

    题目:一种新的离散粒子群优化算法 中文摘要 粒子群优化算法在许多优化问题上表现得非常好.粒子群优化算法的缺点之一是假设算法中的变量为连续变量.本文提出一个新的粒子群优化算法,能够优化离散变量.这个新算 ...

  8. 别被调查汇总郁闷到——有Excel呢！

    年初的某天,我在家待得好好的,好吧,其实也不是待得好好的,这事大家都知道,新冠病毒嘛,都锁家里了,还好本妖向来宅--呃--跑题了--肥来! 其实我能在家好好地待着,有水有电有Wi-Fi,那是有多少人冒 ...

  9. js文件需要jsp页面中的div时，此js文件必须在div之后才能获得值，否则获取不到

    js文件需要jsp页面中的div时,此js文件必须在div之后才能获得值,否则获取不到 2.图2的内容为directionkey.js的内容

  10. SDP 格式解析

    一.SDP协议介绍 SDP 完全是一种会话描述格式 ― 它不属于传输协议 ― 它只使用不同的适当的传输协议,包括会话通知协议(SAP).会话初始协议(SIP).实时流协议(RTSP).MIME 扩展协 ...