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

最新推荐文章于 2024-07-03 10:31:42 发布
最新推荐文章于 2024-07-03 10:31:42 发布
阅读量8k 收藏 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);
    });
});
澜漾
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【译】 WebSocket 协议第七章——关闭连接（Closing the Connection）
weixin_34272308的博客
01-14 3401
概述 本文为 WebSocket 协议的第七章，本文翻译的主要内容为 WebSocket 连接关闭相关内容。 有兴趣了解该文档之前几章内容的同学可以见： 【译】WebSocket 协议——摘要（ Abstract ） 【译】WebSocket 协议第一章——介绍（ Introduction ） 【译】WebSocket 协议第二章——一致性要求（ Conformance Requirements...
springBoot2.0整合webSocket 服务器主动推送数据到前端,并且弹框提示带有音乐提醒
01-21
本教程将深入探讨如何在SpringBoot 2.0版本中整合WebSocket，以实现服务器主动向前端推送数据，并且当消息到达时，前端能够进行声音提示和弹框提醒。 首先，我们需要理解WebSocket的基本概念。WebSocket是一种在...
正确主动关闭websocket，异常关闭处理
资深全栈开发工程师
11-16 1万+
开发大型项目时需要正确主动关闭websocket，同时根据异常关闭正确的执行重连。后面的不想翻译，请读者自行翻译，帮你贴一个。
vue3 websocket连接上了，会自动断开的处理的二种方式
最新发布
jwbabc的专栏
07-03 783
前端websocket通过发心跳包来处理，连接上了，没几秒就断开的问题。
客户端主动断开webSocket
WLinyi的博客
11-09 2万+
socket.onclose(); //不可使用socket.close();
如何（关闭）断开 Websocket 连接：简单易懂的实现指南
04-01 4174
协议提供了一条用于 Web 应用程序中双向通讯的高效通道，让服务器能够实时地向客户端发送信息，而无需客户端每次都发起请求。本文旨在探讨有关结束 WebSocket 连接的适当时机，内容包括协议的基础知识、如何结束连接、一些使用场景，以及归纳总结。
websocket主动关闭连接的方式
热门推荐
binlixia的博客
10-09 7万+
在即时通讯中，为了实现一个账户，同一时刻只能在一台设备上登录。 例如：有两台手机A和B，账号Account   当Account已经在手机A上登录，如果要在手机B上登录账号Account,就必须强制断开手机A与服务器建立的WebSocket连接。而且在断开连接之前需要往手机A返回一些信息，表示已经被另外一个用户强制登录了。 刚开始的时候，采用的断开方式是，获取到建立WebSocket链接所产
web端主动断开webSocket方法
seimeii的博客
02-17 3916
if("WebSocket" in window) { let ws = new WebSocket(`ws:你的url`); ws.close(); }
通过前端Jquery调用web Socket连接，并返回数据Demo
07-06
WebSocket是一种在客户端与服务器之间建立长连接的协议，它提供了双向通信的能力，即服务器和客户端都可以主动发送数据。在Web开发中，WebSocket极大地提升了实时性，使得数据传输更高效，尤其适用于实时聊天、股票...
QtWebsocket:websocket 主动消息推送 qt通信示例
05-14
QtWebsocket是一个基于Qt库的WebSocket客户端和服务器框架，它允许应用程序通过WebSocket协议进行双向通信。在本文中，我们将深入探讨如何利用QtWebsocket实现WebSocket的主动消息推送，以及Qt通信的相关示例。首先...
完美解决spring websocket自动断开连接再创建引发的问题
12-10
当检测到session即将过期或已经过期时，可以主动关闭WebSocket连接，这样在用户进行新操作时，前端可以检测到连接状态并重新建立连接。 2. **心跳机制**：在WebSocket连接中，可以实现心跳机制，即客户端定期发送轻...
HTML5 websocket 断线自动重新连接，断线提示
01-22
界面是HTML5 ,自动连接websocket服务器端，连接成功提示。断线提示，并且自动重连。自动检测状态。
springmvc-websocket:使用 websocket 在客户端和服务器之间进行实时通信的示例
07-17
WebSocket 协议是基于 TCP 的，与传统的 HTTP 不同，HTTP 是无状态的，而 WebSocket 可以保持持久连接，允许服务器主动发送数据给客户端。这种特性非常适合需要实时更新的应用，如聊天室、股票报价、在线游戏等。 ...
WebSocket：从建立连接到关闭的完整流程
曲江涛的博客
06-01 9664
WebSocket（WS）是一种在客户端和服务器之间建立持久连接的通信协议。下面我将详细介绍WebSocket的开始链接到结束并彻底关闭的流程设计。客户端发起连接请求：客户端通过创建WebSocket对象并向服务器发送连接请求。请求中包含了连接的URL和其他必要的头部信息。服务器接受连接请求：服务器收到连接请求后，进行验证和处理。如果请求符合要求，服务器将返回一个握手响应。客户端与服务器进行握手：客户端收到服务器的握手响应后，进行验证。如果握手成功，建立了WebSocket连接。
vue前端后端实现WebScoket 即时通讯和主动断开链接
weixin_43845137的博客
03-12 2346
vue前端后端实现WebScoket 即时通讯和主动断开链接
WebSocket接收前端图片自动断开连接异常
Lee_01的博客
12-18 2316
前端一发送图片，WebSocket就自动断开连接
通过JavaScript终止WebSocket数据传输
南城
12-24 1343
在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 3506
vue实现websocket断线重连 下面是自己写的demo和注释，为了以后再用websocket，看起来方便一点=-= <template> <div> <button @click="sendDevName('xxxxxxxx')">发送</button> {{data}} </div> </templa...
前端使用websocket
08-12
### 回答1： 前端可以使用 WebSocket API 来实现 WebSocket 通信。具体步骤如下： 1. 创建 WebSocket 对象：使用 `new WebSocket(url)` 方法创建一个 WebSocket 对象，其中 `url` 是 WebSocket 服务器的地址。 2. 监听事件：WebSocket 对象提供了多种事件，如 `onopen`、`onmessage`、`onerror` 和 `onclose` 等。可以通过监听这些事件来处理 WebSocket 的状态和收发数据。 3. 发送消息：使用 `WebSocket.send(data)` 方法向服务器发送消息，其中 `data` 是要发送的数据。 4. 关闭连接：使用 `WebSocket.close()` 方法关闭连接。 下面是一个简单的示例代码： ```javascript // 创建 WebSocket 对象 const socket = new WebSocket('ws://localhost:8080'); // 监听事件 socket.onopen = function() { console.log('WebSocket 连接已建立'); }; socket.onmessage = function(event) { console.log('收到服务器消息：', event.data); }; socket.onerror = function(error) { console.error('WebSocket 错误：', error); }; socket.onclose = function(event) { console.log('WebSocket 连接已关闭'); }; // 发送消息 socket.send('Hello, WebSocket!'); // 关闭连接 socket.close(); ``` ### 回答2： 前端使用WebSocket是一种通过HTTP协议建立的双向通信技术，它可以实现实时的数据传输和接收。前端通过WebSocket与服务器建立连接后，可以发送和接收数据，实现实时更新和交互。 首先，前端需要使用JavaScript中的WebSocket API进行WebSocket的连接，通过WebSocket构造函数可以创建WebSocket对象。在创建WebSocket对象时，需要传入服务器的URL作为参数，指定服务器的地址。 一旦连接建立，前端可以通过WebSocket对象的send方法向服务器发送数据。服务器收到前端发送的数据后，可以处理并给前端返回数据。前端通过WebSocket对象的onmessage事件来监听服务器返回的数据，在收到数据后可以对数据进行处理和展示。 除了发送和接收数据，前端还可以监听WebSocket连接的状态。WebSocket对象有一个readyState属性，可以判断连接的状态，常用的状态有OPEN，CLOSED等。 前端通过WebSocket技术可以实现一些实时性要求较高的功能，比如实时聊天、实时数据展示等。相比传统的HTTP请求和响应模式，WebSocket可以减少不必要的网络延迟和请求开销，提供更好的用户体验。 总而言之，前端使用WebSocket可以在浏览器和服务器之间建立实时的双向通信，通过发送和接收数据，实现实时的更新和交互。这为前端开发提供了更多的可能性，使得Web应用可以更加灵活和实用。 ### 回答3： 前端使用WebSocket是一种实时通信的网络协议，它能够在浏览器和服务器之间建立一个持久的连接，实现双向的即时通信。 传统的网页通信是基于HTTP协议，即浏览器向服务器发送请求，服务器返回响应，这种通信模式无法实现服务器主动向浏览器推送数据。而WebSocket能够解决这个问题，它允许服务器和客户端之间建立一个双向的通信通道，实现实时数据传输。 前端使用WebSocket的步骤如下： 1. 创建WebSocket对象：在浏览器中，我们可以通过JavaScript的`new WebSocket(url)`来创建一个WebSocket对象，其中url是服务器的地址。 2. 监听事件：WebSocket对象有多个事件用于监听不同的状态或数据。常用的事件有`onopen`、`onmessage`、`onclose`和`onerror`。`onopen`事件在连接建立时触发，`onmessage`事件在接收到服务器发送的数据时触发，`onclose`事件在连接关闭时触发，`onerror`事件在遇到错误时触发。 3. 发送和接收数据：可以通过WebSocket对象的`send()`方法向服务器发送数据，服务器通过`onmessage`事件接收到数据后可以进行相应处理，并通过`send()`方法向客户端发送数据。 4. 关闭连接：连接不再需要时，可以通过WebSocket对象的`close()`方法手动关闭连接。 前端使用WebSocket可以实现很多实时性要求较高的功能，例如在线聊天、实时协作、实时数据展示等。它相比于传统的轮询方式，能够减少服务器的压力，提高系统的响应速度。但需要注意的是，由于WebSocket是一种新的协议，不是所有浏览器都支持，因此在使用时需要考虑兼容性问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值