WebSocket前端测试源码，可直接复制使用

最新推荐文章于 2022-12-20 03:20:52 发布
最新推荐文章于 2022-12-20 03:20:52 发布
阅读量775 收藏 3
点赞数
分类专栏： html 文章标签： javascript websocket
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42822484/article/details/103985874
版权 
	代码如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>WebSocket测试</title>
</head>

<body>

    <p>WebSocket</p>
    <button type="button" onclick="testWebSocket()">测试</button>
    <script>
        const state = ['连接尚未建立', '连接已建立，可以进行通信', '连接正在进行关闭', '连接已经关闭或者连接不能打开'];

        function testWebSocket() {
            var ws = new WebSocket('ws://echo.websocket.org/echo');
            console.log('ws连接状态：' + ws.readyState + ' --- ' + state[ws.readyState]);
            //监听是否连接成功
            ws.onopen = function () {
                console.log('ws连接状态：' + ws.readyState + ' --- ' + state[ws.readyState]);
                //连接成功则发送一个数据
                ws.send('这是一个测试数据');
                console.log('已发送一个数据')
            }
            //接听服务器发回的信息并处理展示
            ws.onmessage = function (data) {
                console.log('接收到来自服务器的消息：');
                console.log(data);
                //完成通信后关闭WebSocket连接
                ws.close();
                console.log('正在关闭...');
            }
            //监听连接关闭事件
            ws.onclose = function () {
                //监听整个过程中websocket的状态
                console.log('ws连接状态：' + ws.readyState + ' --- ' + state[ws.readyState]);
            }
            //监听并处理error事件
            ws.onerror = function (error) {
                console.log(error);
            }
            console.log("全部代码已执行完毕，WebSocket处于异步监听状态");
        }
    </script>

</body>

</html>

	大家可以直接复制这个代码进行测试，理解前端webSocket的运行过程和机制。
	（前提你的web浏览器支持WebSocket，否则还要做判断）

测试的结果

皆非的万事屋
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
云E办Springboot+vue——前端项目完整版（含源码）
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
08-10 5万+
本项目基于Vue+Spring Boot构架一个前后端分离项目。前端使用社区非常活跃的开源框架vue进行构建。受疫情的影响，许多企业由线上办公转为线下办公。随着线上办公的人数的增多，线上办公的优点逐步凸显：通过实现工作流程的自动化、节省企业办公费用、实现绿色办公，同时提升办公效率。前端使用的技术有： Vue、Vue-cli、Vuex、VueRouter、ElementUI、Axios、ES6、Webpack、WebSocket、font-awesome、js-file-download、vue-chat 项
webworker中用ajax,WebWorker与WebSocket实现前端消息总线(示例代码)
weixin_35767338的博客
08-06 513
Web Worker让JS有了多线程的能力，可以将复杂耗时的操作都交付给Worker线程处理。WebSocket让web端与服务端维持一个有效的长连接，实现服务端主动推送数据。将二者一结合，业务系统信息流转通知功能完全就可以剥离出来。架构图JS WorkerWorker工作在一个专用的作用域DedicatedWorkerGlobalScope,在这个作用域中，不能直接操作DOM节点，不能使用Win...
WebSocketDemo-js:基于 WebSocket 的聊天室（前端代码）
04-30
WebSocketDemo-js 基于 WebSocket 的聊天室（前端代码）
websocket html5 客户端测试代码
M348915654的专栏
12-13 3611
测试 websocket 客户端的连接、发送消息和断开，生成一个面板用于显示 log，代码功能单一，便于测试。 index.html WebSoket Demo // tips: WebSocket 调试脚本 var WebSocket = WebSocket || window.WebSocket
js 链接websocket马上断开_自制WebSocket测试工具(前端篇)
weixin_39632212的博客
11-29 446
导读小编昨天花了一个小时自制了一个WebSocket测试小工具，和网络上搜索到的在线工具类似，可以实现WebSocket的连接、断开和发送等功能，同时还加上了一些颜色来区别。那么我们先来看看效果吧，这里展示的是实时日志功能。此篇文章仅展示前端代码(代码部分请左右滑动查看)。代码部分看完效果之后话不多说直接上WebSocket核心代码,通常分为连接、接收、发送、异常...
websocket测试html
程序员一代码搬运工
12-20 424
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" ...
基于WebSocket的测试用例
C_U_N_Z的博客
08-16 888
基于WebSocket的测试用例
Spring Boot中使用WebSocket总结（三）：使用消息队列实现分布式WebSocket
weixin_34004750的博客
11-21 2134
在上一篇文章（www.zifangsky.cn/1359.html）中我介绍了服务端如何给指定用户的客户端发送消息，并如何处理对方不在线的情况。在这篇文章中我们继续思考另外一个重要的问题，那就是：如果我们的项目是分布式环境，登录的用户被Nginx的反向代理分配到多个不同服务器，那么在其中一个服务器建立了WebSocket连接的用户如何给在另外一个服务器上建立了WebSocket连接的用户发送消息呢...
通过Websocket实现Postgres数据库更新实时回显
weixin_43616450的博客
10-24 707
开发环境: Jdk1.8 Tomcat 8.5 Postgres 9 Eclipse JavaEE 操作系统:win 10 实现回显的思路: 定义index.jsp用作websocket客户端 定义jdbc类操作数据库,并把值实时返回 定义websocket配置类实现ServerApplicationConfig接口,配置websocket 定义服务器端类 实现数据接收与数据发送 目...
使用 Spring Cloud Gateway 替换 Zuul 实现接入 WebSocket 教程
qq_15505769的博客
01-13 7851
文章转载自：https://www.bl-blog.com/a/9/27 前言 之前的项目使用的是Zuul网关，有个需求需要用到WebSocket，所以一直在查Spring Cloud Zuul 转发 WebSocket请求的教程和文章，查来查去，发现不行，Zuul对WebSocket的支持不是很友好。 总结下来就是以下几点： 高版本的websocket在第一次http请求后，使用的是更快速的t...
websocket聊天测试
06-23
websocket 消息推送 websocket聊天测试 java web后台 android 前端 html前段 利用websocket实现聊天
本地WebSocketServer测试.html
07-23
本地测试websocket的连接通信，超级方便操作，可实时查看服务器响应。
websocket源码经典实例
01-16
webSocket客户端和服务端实例源码 webSocket ws实例 HTML5 用java实现的服务端
websocket控制台.html
08-23
WebSocket控制台 本可视化布局程序在HTML5浏览器上运行更加完美, 能实现自动本地化保存, 即使关闭了网页, 下一次打开仍然能恢复上一次的操作.
支持WebSocket的fleck，WEBSOCKET通信服务端控件,很多博客都只提供了代码没这个控件，找了很久才找到
03-11
支持WebSocket的fleck，WEBSOCKET通信服务端控件,很多博客都只提供了代码没这个控件，找了很久才找到
websocket·测试代码
ren762201592的专栏
06-29 853
websocket服务端测试，使用postman无法测试。那接下来我们使用自己写的js来测试。直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docu...
SpringBoot使用WebScoket（附带前端测试代码）
sunayn的博客
02-03 577
什么是WebScoket? WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。 为什么使用WebScoket？ 因为 ：HTTP 协议有一个缺陷：通信只能由客户端发起，HTTP 协议做不到服务器主动向客户端推送信息。而WebScoket可以由服务器主动发送信息给客户端。 应用实例： maven依赖： <dependency> <groupId>
JS---- websocket 前端测试页面
Damys
06-08 684
var websocket = {}; function openSocket() { var userId = document.getElementById('userId').value; if (userId == "" ) { console.warn("roleId, 不能为空") return; } if ('WebSocket' in window) { if (websocket != null) { websocket.CLOSED; websocke
前端Js WebSocket测试代码，连websocket.org
编程架构三分天下：分层、分治、分时序。
10-22 2097
连接ws://echo.websocket.org/进行测试，代码如下： <script> function initWebSocket(wsUri) { var websocket = new WebSocket(wsUri); websocket.onopen = function(evt) { console.log('open...'); }; websocket.onclose = func
websocket前端使用
最新发布
05-17
使用 WebSocket 前端需要以下步骤： 1. 创建 WebSocket 对象 在前端 JavaScript 中使用 WebSocket 首先需要创建 WebSocket 对象。可以通过以下代码创建： ```javascript var socket = new WebSocket('ws://localhost:8080'); ``` 其中，参数 'ws://localhost:8080' 是 WebSocket 服务器的地址。 2. 监听 WebSocket 事件 WebSocket 对象提供了一些事件来处理与服务器的交互。可以通过 addEventListener() 方法添加事件监听器来监听这些事件。常用的事件有： - onopen：连接成功 - onmessage：接收到服务器发送的消息 - onerror：连接错误 - onclose：连接关闭 例如： ```javascript socket.addEventListener('open', function(event) { console.log('Connected to WebSocket server'); }); socket.addEventListener('message', function(event) { console.log('Received message: ' + event.data); }); socket.addEventListener('error', function(event) { console.error('WebSocket error: ' + event); }); socket.addEventListener('close', function(event) { console.log('WebSocket connection closed: ' + event); }); ``` 3. 发送消息 可以使用 WebSocket 对象的 send() 方法发送消息给服务器，例如： ```javascript socket.send('Hello, server!'); ``` 完整的示例代码： ```javascript var socket = new WebSocket('ws://localhost:8080'); socket.addEventListener('open', function(event) { console.log('Connected to WebSocket server'); }); socket.addEventListener('message', function(event) { console.log('Received message: ' + event.data); }); socket.addEventListener('error', function(event) { console.error('WebSocket error: ' + event); }); socket.addEventListener('close', function(event) { console.log('WebSocket connection closed: ' + event); }); socket.send('Hello, server!'); ``` 以上就是使用 WebSocket 前端的基本步骤。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值