前端 WebSocket，客户端主动连接，主动关闭

最新推荐文章于 2024-12-11 11:40:28 发布
最新推荐文章于 2024-12-11 11:40:28 发布
阅读量8.1k 收藏 9
点赞数 1
分类专栏： JS大笔记
原文链接：http://blog.fens.me/nodejs-websocket/
版权 
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>webSocket小Demo</title>
	</head>
	<body>
		<div class="container">
			<div>
				<input type="text" id="msg">
				<button onclick="onOpen()">点击打开连接</button>
				<button onclick="sendMsg()">发送报文</button>
				<button onclick="onClose()">点击打开连接</button>
			</div>
		</div>
		<script>
			var ws;
			onOpen()
			
			function sendMsg() {
				let msg = document.getElementById('msg').value;
				ws.send(msg);
			}

			function onOpen() {
				ws = new WebSocket('ws://localhost:4399');
				ws.onopen = () => {
					console.log('状态打开...');
				}
				ws.onmessage = (res) => {
					console.log("数据：", res);
				};
				ws.onclose = () => {
					console.log('状态关闭...');
				}
			}

			function onClose() {
				ws.close()
			}
		</script>
	</body>


const WebSocketServer = require('ws').Server;
const wss = new WebSocketServer({ port: 4399 });
wss.on('connection', function (ws) {
    console.log('状态已经链接');
    ws.on('message', function (message) {
        ws.send('收到数据并返回：' + message);
    });
});
【译】 WebSocket 协议第七章——关闭连接（Closing the Connection）
weixin_34272308的博客
01-14 3485
概述 本文为 WebSocket 协议的第七章，本文翻译的主要内容为 WebSocket 连接关闭相关内容。 有兴趣了解该文档之前几章内容的同学可以见： 【译】WebSocket 协议——摘要（ Abstract ） 【译】WebSocket 协议第一章——介绍（ Introduction ） 【译】WebSocket 协议第二章——一致性要求（ Conformance Requirements...
【Tool-WebSocket】WebSocket客户端工具(Html)
菜鸟随手笔记
12-16 4026
1、效果图 用浏览器打开 WebSocket测试工具.html 的效果如下。 2、网页代码 WebSocket测试工具.html 的代码实现如下。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>WebSocket测试工具</title> <sty
客户端主动断开webSocket
WLinyi的博客
11-09 2万+
socket.onclose(); //不可使用socket.close();
Web实时通信的学习之旅：SSE（Server-Sent Events）的技术详解及简单示例演示
最新发布
web14786210723的博客
12-11 2623
服务器向浏览器推送信息，除了 WebSocket，还有一种方法：Server-Sent Events（以下简称 SSE）。SSE（Server-Sent Events）是一种用于实现服务器主动向客户端推送数据的技术，也被称为“事件流”（Event Stream）。它基于 HTTP 协议，利用了其长连接特性，在客户端与服务器之间建立一条持久化连接，并通过这条连接实现服务器向客户端的实时数据推送。
正确主动关闭websocket，异常关闭处理
资深全栈开发工程师
11-16 2万+
开发大型项目时需要正确主动关闭websocket，同时根据异常关闭正确的执行重连。后面的不想翻译，请读者自行翻译，帮你贴一个。
如何（关闭）断开 Websocket 连接：简单易懂的实现指南
04-01 7054
协议提供了一条用于 Web 应用程序中双向通讯的高效通道，让服务器能够实时地向客户端发送信息，而无需客户端每次都发起请求。本文旨在探讨有关结束 WebSocket 连接的适当时机，内容包括协议的基础知识、如何结束连接、一些使用场景，以及归纳总结。
websocket主动关闭连接的方式
热门推荐
binlixia的博客
10-09 7万+
在即时通讯中，为了实现一个账户，同一时刻只能在一台设备上登录。 例如：有两台手机A和B，账号Account   当Account已经在手机A上登录，如果要在手机B上登录账号Account,就必须强制断开手机A与服务器建立的WebSocket连接。而且在断开连接之前需要往手机A返回一些信息，表示已经被另外一个用户强制登录了。 刚开始的时候，采用的断开方式是，获取到建立WebSocket链接所产
web端主动断开webSocket方法
seimeii的博客
02-17 3983
if("WebSocket" in window) { let ws = new WebSocket(`ws:你的url`); ws.close(); }
springBoot2.0整合webSocket 服务器主动推送数据到前端,并且弹框提示带有音乐提醒
01-21
本教程将深入探讨如何在SpringBoot 2.0版本中整合WebSocket，以实现服务器主动向前端推送数据，并且当消息到达时，前端能够进行声音提示和弹框提醒。 首先，我们需要理解WebSocket的基本概念。WebSocket是一种在...
JAVA使用WebSocket实现多客户端请求
qq_38910617的博客
10-26 5690
小程序和app端两个服务之间实现聊天通讯，因为介于两个服务，两个客户端，方案实现
springboot整合WebSocket：后台服务主动发送信息给前端客户端
leomoon
02-25 4661
1.前端websocket开启方法 // WebSocket接收消息推送 openSocket() { if (typeof WebSocket == "undefined") { console.log("您的浏览器不支持WebSocket"); } else { var socketUrl = `http://localhost:8080/ws/` + this.user.id; socketUrl = socket
HTML5 websocket 断线自动重新连接，断线提示
01-22
界面是HTML5 ,自动连接websocket服务器端，连接成功提示。断线提示，并且自动重连。自动检测状态。
C#_WinForm实现WebSocket及时通讯
09-01
这通常涉及初始化WebSocket客户端对象，设置服务器地址和端口，然后打开连接。在WinForm界面上，可以添加文本框和按钮，以便用户输入消息并发送，同时显示接收到的消息。 为了实现即时通讯，我们需要处理WebSocket...
WebSocket：从建立连接到关闭的完整流程
曲江涛的博客
06-01 1万+
WebSocket（WS）是一种在客户端和服务器之间建立持久连接的通信协议。下面我将详细介绍WebSocket的开始链接到结束并彻底关闭的流程设计。客户端发起连接请求：客户端通过创建WebSocket对象并向服务器发送连接请求。请求中包含了连接的URL和其他必要的头部信息。服务器接受连接请求：服务器收到连接请求后，进行验证和处理。如果请求符合要求，服务器将返回一个握手响应。客户端与服务器进行握手：客户端收到服务器的握手响应后，进行验证。如果握手成功，建立了WebSocket连接。
vue前端后端实现WebScoket 即时通讯和主动断开链接
weixin_43845137的博客
03-12 2573
vue前端后端实现WebScoket 即时通讯和主动断开链接
WebSocket接收前端图片自动断开连接异常
Lee_01的博客
12-18 2407
前端一发送图片，WebSocket就自动断开连接
通过JavaScript终止WebSocket数据传输
南城
12-24 1724
在JavaScript中，可以通过代码终止正在进行中的WebSocket（WSS）数据传输，通常需要使用WebSocket API和事件监听器。在某些情况下你可能需要终止正在进行中的WebSocket数据传输，例如当用户取消连接或服务器出现故障时。
WebSocket建立连接的过程
weixin_44761091的博客
03-02 1万+
文章目录一、WebSocket是什么？二、webSocket建立连接的过程 一、WebSocket是什么？ WebSocket实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的。解决了http无状态、短链接和服务器端无法主动给客户端推送数据等问题。其通信基础也给予TCP。由于较老的浏览器可能不支持WebSocket协议，所以使用WebSocket通信的双方在进行TCP的三次握手之后，还需要额外在进行一次握手，这一次握手的双方通信的报文也是基于http协议改造的。 二、webSo
vue实现websocket断线重连
痴心的萝卜的博客
10-11 3694
vue实现websocket断线重连 下面是自己写的demo和注释，为了以后再用websocket，看起来方便一点=-= <template> <div> <button @click="sendDevName('xxxxxxxx')">发送</button> {{data}} </div> </templa...
前端在关闭websocket时,主动向服务器端推送消息
11-28
在前端使用WebSocket连接与服务器通信时，如果需要在关闭连接前主动发送一些数据，通常不会直接像HTTP请求那样发起一个新的`push`操作。WebSocket是全双工的，允许客户端主动向服务器发送消息，而不仅仅是接收。 当客户端决定关闭WebSocket连接（例如通过调用`close()`方法），它仍然可以发送一次数据，这被称为“关闭前的数据发送”（going away message）。在JavaScript中，可以在`beforeunload`事件、`onbeforeunload`回调或者显式地在`close()`方法调用前发送数据： ```javascript socket.onclose = function(event) { if (event.wasClean) { // 如果连接正常关闭，发送最后一条消息 socket.send('Closing connection'); } socket.close(); }; ``` 在这个例子中，如果`wasClean`属性为真，表示连接是由浏览器自动中断（如用户离开页面），客户端依然可以尝试发送消息。不过需要注意的是，由于这是在断开连接的过程中发生的，服务器接收到这个消息的概率并不高，并且可能会丢失。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值