WebSocket实现简单的双向通信

最新推荐文章于 2024-05-09 15:15:12 发布
最新推荐文章于 2024-05-09 15:15:12 发布
阅读量120 收藏
点赞数 3
文章标签： javascript node.js 前端 websocket express
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_68937887/article/details/136820451
版权

后端nodejs+express-ws

先在bin下的www文件中导入express-ws，再将app,server放进去

 

72424075d2f34e1a9c40fc4e2aa2507c.jpg 子路由文件

这里用express -e快速生成的，就直接用他里面已经注册的user路由,sock(router)为router添加ws方法9401e08aa2a34ea8ac81f4b80dd6be4d.jpg

 前端vue3

前端页面没什么样式，css就忽略了

9e95f36d74dd4cf48fdca6f517ac0c84.jpg

 8b83478b89b24994af11f9a87fa50bd1.jpg

6c1e2a2d3d6943c28b0385a4ca85f200.jpg 

效果

这里启动了两次项目，方便观察

f95b023e13734af99a325fa29c80ddba.jpg

 

 

 

*!?
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue+Java 通过websocket实现服务器与客户端双向通信操作
10-14
主要介绍了Vue+Java 通过websocket实现服务器与客户端双向通信操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
socket双向通信c语言,WebSocket实现实时双向通信
weixin_29092787的博客
05-19 912
1.什么是websocketWebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。 2. http、websocket 、socket 区别案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起，HTTP 协议做不到服务器主动向客户端推送信息。 WebSocket与Socket的关系Socket...
WebSocket：实现实时双向通信的利器
weixin_42279822的博客
11-01 694
WebSocket：实现实时双向通信的利器WebSocket是一种强大的协议，用于实现实时双向通信，允许客户端和服务器之间建立长久的连接，以便实时传递数据。这个协议在现代Web应用中发挥着至关重要的作用，因为它使得开发实时性要求高的应用变得更加容易。本篇博客将深入探讨WebSocket的原理、用法以及适用场景。
实战 WebSocket 实现双向通讯
kxzasnl的博客
06-06 354
接收数据：通过 WebSocket 对象的 onmessage 事件来接收服务器发送回来的数据。建立连接：通过调用 WebSocket 对象的 open() 方法来建立与服务器的连接。关闭连接：通过调用 WebSocket 对象的 close() 方法来关闭与服务器的连接。发送数据：通过调用 WebSocket 对象的 send() 方法来向服务器发送数据。这里以监听字符串为例子（可以选择监听文件等）
WebSocket协议：实现实时双向通信的秘诀
qq_54469537的博客
10-10 672
这篇博客主要介绍了什么是websocket协议，如何使用基于 Spring 的 websocket api 写一个简单的hello world程序以及HTTP和WebSocket的区别
WebSocket 双向通信
huangpb的博客
11-04 1734
何为 WebSocket？ WebSocket 是一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。属于 HTML5 新特性，IE 只兼容到 IE10。 WebSocket 和 HTTP 都是应用层协议，都基于 TCP 协议。但是 WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或...
深入理解WebSocket：实时双向通信的利器
喵酱
04-02 1313
WebSocket是一种在单个TCP连接上进行全双工通信的协议，它能够在客户端和服务器之间建立实时、双向的通信通道。与传统的HTTP通信相比，WebSocket更轻量级、更高效，适用于需要实时通信或推送消息的场景。WebSocket的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息。
websocket结合node.js实现双向通信
xiaoyingyings的博客
03-03 2587
首先我们需要了解，什么是websocket，它的作用和优势是什么，为什么要用它。 什么是websocket? websocket是基于TCP的一种双向通信协议。在此之前，一直是采用轮询的方式进行双向通信， 这种方式效率低下还非常浪费资源。为了解决这种问题，websocket应运而生。 特点： 双向通信 websocket使得客户端跟服务端之间交换数据变得更加简单。允许服务器主动向客户端推送数据。浏览器只需要和服务器完成一次握手，就可以创建持久性的连接，并进行双向数据传输。 实时性强 服务器可以主动给客户
WebSocket实现实时通信
热门推荐
zep
07-23 2万+
WebSocket 是一种数据通信协议，也是用于客户端和服务端数据通信，类似于我们常见的 http 既然有 http，为啥还要 WebSocket http 通信是单向的 请求 + 响应 没有请求也就没有响应 初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？ 答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。 举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到.
WebSocket实现实时通信、在线聊天
qq_42875353的博客
12-13 724
最近有个新需求，做一个实时通讯的功能，类似于在线聊天这种场景的业务，最后使用WebSocket实现
Spring WebSocket实现实时通信的详细教程
lucky_fd的博客
01-18 1363
WebSocket 是基于TCP/IP协议，独立于HTTP协议的通信协议。WebSocket 连接允许客户端和服务器之间的全双工通信，以便任何一方都可以通过已建立的连接将数据推送到另一方。我们常用的HTTP是客户端通过「请求-响应」的方式与服务器建立通信的，必须是客户端主动触发的行为，服务端只是做好接口被动等待请求。而在某些场景下的动作，是需要服务端主动触发的，比如向客户端发送消息、实时通讯、远程控制等。
WebSocket的通信过程与实现方法详解
08-27
主要给大家爱介绍了关于WebSocket的通信过程与实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧
websocket的简单案例
12-14
使用vue3和springboot2,简单实现了websocket的双向通信的demo。可以给让服务器和客户端实现长连接，浏览器向服务器发送消息，服务器可以给浏览器发送消息。可以下载来了解websocket的应用。在这个demo的基础上，添加...
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
XING的博客
05-03 1309
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
使用 js 类封装项目中音频播放功能的工具方法utils
qq_40868156的博客
05-07 196
封装音频播放功能的工具方法，js，es6，前端，工程化
vue3引入element-plus完整步骤
zzx262625的博客
05-06 430
如果你的项目需要在低版本浏览器上运行，你可能需要使用一些转换工具（如Babel、ESBuild）和polyfill来确保兼容性。在你的Vue项目中配置一个编译器（如Vue CLI、Vite等），然后运行你的项目。你可以尝试在你的组件中使用一些Element Plus的组件来确保它们正常工作。使用npm（或cnpm，如果你在中国并且希望使用淘宝的npm镜像）来安装Element Plus。这样，你就可以在你的Vue组件中使用Element Plus的图标了。在你的Vue 3项目的入口文件（通常是。
TypeScript — 泛型
最新发布
一只想躺平却不敢躺平的小菜鸟
05-09 133
TypeScript —— 泛型
vue3 element-plus表单form验证规则设置的require:true无效
qq_33225414的博客
05-08 172
【代码】vue3 element-plus表单form验证规则设置的require:true无效。
前端 | iframe框架标签应用（二）| 外部页面导入
因为健忘，所以记点有的没的〒▽〒
05-06 1306
点击右上角喇叭，弹出iframe页面框，链接bilibili白噪音视频页面；点击关闭按钮，关闭弹出框。
WebSocket双向通信
07-12
WebSocket是一种在客户端和服务器之间实现双向通信的网络协议。它通过在客户端和服务器之间建立持久连接，允许双方实时地发送消息和数据。 与传统的HTTP协议相比，WebSocket协议具有以下特点： 1. 双向通信：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值