弄懂 Websocket 你得知道的这 3 点

WebSocket原理

WebSocket 同HTTP一样也是应用层的协议,但是它是一种双向通信协议,是建立在TCP之上的。WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket API也被W3C定为标准。WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手, 两者之间就直接可以创建持久性的连接,并进行双向数据传输。

握手过程:

  1. 浏览器、服务器建立TCP连接,三次握手。这是通信的基础,传输控制层,若失败后续都不执行。

  2. TCP连接成功后,浏览器通过HTTP协议向服务器传送WebSocket支持的版本号等信息。(开始前的HTTP握手)

  3. 服务器收到客户端的握手请求后,同样采用HTTP协议回馈数据。

  4. 当收到了连接成功的消息后,通过TCP通道进行传输通信。

Websocket 默认使用请求协议为:ws://,默认端口:80。对TLS加密请求协议为:wss://,端口:443。

WebSocket与HTTP的关系

相同点:

  1. 都是一样基于TCP的,都是可靠性传输协议。

  2. 都是应用层协议。

不同点:

  1. WebSocket是双向通信协议,模拟Socket协议,可以双向发送或接受信息。

  2. HTTP是单向的。

  3. WebSocket是需要握手进行建立连接的。

联系: WebSocket在建立握手时,数据是通过HTTP传输的。但是建立之后,在真正传输时候是不需要HTTP协议的。

WebSocket与Socket的关系

Socket其实并不是一个协议,而是为了方便使用TCP或UDP而抽象出来的一层,是位于应用层和传输控制层之间的一组接口。tcp是可靠的连接,且连接后才可以发送数据;udp是不可靠的连接,不连接就可以发送数。

Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口。在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP协议族隐藏在Socket接口后面,对用户来说,一组简单的接口就是全部,让Socket去组织数据,以符合指定的协议。

当两台主机通信时,必须通过Socket连接,Socket则利用TCP/IP协议建立TCP连接。TCP连接则更依靠于底层的IP协议,IP协议的连接则依赖于链路层等更低层次。

WebSocket则是一个典型的应用层协议,Socket是传输控制层协议。

如果你在日常工作中需要进行 Websocket 协议测试,但又不知道使用什么工具,那我推荐你用这一款开源的 API 管理工具——Eoapi(现更名为Postcat):

目前在 Github 上 3.5 k star,如果你觉得这个项目还不错的话,不妨点个 star 支持一下~

Github:

https://github.com/Postcatlab/postcat

Postcat 核心功能:

  • API 文档管理:可视化 API 设计,生成 API 文档

  • API 测试:自动生成测试参数,自动生成测试用例,可视化数据编辑

  • 插件拓展:众多插件扩展产品功能,打造属于你和团队的 API 开发平台

  • Mock:根据文档自动生成 Mock,或创建自定义 Mock 满足复杂场景

  • 团队协作:既能实现 API 分享也能可以创建云空间共同协作

Postcat 优势:

  • 免登录即可测试:省去繁琐的验证登录的操作

  • 界面简洁:没有冗余的功能与复杂选项

  • 免费:中小团队以及个人使用

  • 丰富的插件:支持数据迁移、主题、API 安全等高达 30 款插件

  • 国产:能更好的理解国内用户的需求,与开发团队沟通无障碍

  • 完善的用户文档:跟着操作就能快速上手

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于Vue 3和TypeScript的Websocket登录,你可以按照以下步骤进行实现: 1. 安装`websocket`库 ```bash npm install websocket ``` 2. 在Vue 3项目中创建一个`websocket.ts`文件,用于连接websocket并发送和接收消息。 ```typescript import WebSocket from 'websocket'; const socket = new WebSocket.client(); // 连接websocket socket.connect('ws://localhost:8080'); // 发送消息 const send = (data: any) => { socket.send(JSON.stringify(data)); }; // 接收消息 socket.on('message', (message) => { const data = JSON.parse(message.utf8Data); console.log(data); }); export default { send, }; ``` 3. 在Vue 3组件中,使用`websocket.ts`文件中的`send`方法发送消息,并接收消息。 ```typescript <template> <div> <input v-model="message" /> <button @click="sendMessage">发送</button> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import websocket from './websocket'; export default defineComponent({ data() { return { message: '', }; }, methods: { sendMessage() { websocket.send(this.message); }, }, }); </script> ``` 4. 在服务端使用Node.js,并使用`websocket`库创建一个websocket服务器,用于接收和发送消息。 ```typescript import WebSocket from 'websocket'; const server = new WebSocket.server({ httpServer: httpServer, }); // 存储连接的客户端信息 const clients = new Map<string, any>(); server.on('request', (request) => { const connection = request.accept(null, request.origin); // 客户端连接时保存客户端信息 clients.set(connection.remoteAddress, connection); // 接收消息并广播 connection.on('message', (message) => { clients.forEach((client) => { if (client !== connection && client.readyState === WebSocket.OPEN) { client.send(JSON.stringify(message)); } }); }); // 客户端断开连接时删除客户端信息 connection.on('close', () => { clients.delete(connection.remoteAddress); }); }); ``` 通过以上步骤,你就可以在Vue 3和TypeScript项目中实现Websocket登录了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值