WebSocket简单使用

1.WebSocket 简介

WebSocket 是一种网络通信协议，提供了在单个TCP连接上进行全双工通信的能力。这意味着客户端和服务器可以同时发送和接收数据，而不需要等待对方的回应。WebSocket 协议在2011年成为国际标准，并且被大多数现代浏览器所支持。

特点：

  1. 全双工通信：WebSocket 允许服务器主动向客户端发送消息，而不需要客户端先发送请求。这与HTTP协议不同，后者是请求-响应模式的。

  2. 持久连接：一旦WebSocket连接建立，它将保持开放状态，直到客户端或服务器决定关闭它。这减少了频繁建立和关闭连接的开销。

  3. 头部开销小：与HTTP相比，WebSocket的数据传输头部开销更小，因为它不需要像HTTP那样每次通信都发送请求和响应头。

  4. 适用性广泛：WebSocket适用于需要实时数据传输的应用，比如在线游戏、实时聊天应用、股票行情更新等。

  5. 安全性：WebSocket可以通过WSS（WebSocket Secure）协议实现加密，类似于HTTPS。

2. 服务端使用

1. java SpringBoot 框架下使用 WebSocket

1. 引入依赖
websocket 的maven 坐标：

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

2. 编写 WebSocket

  • 在项目下创建一个websocket 包， 创建WebSocketServer 类
  • 通过@Component 注解将该类交给spring 管理
  • 通过@ServerEndpoint 注解将该类声明为websocket 服务端并通过参数指定访问路径
@Component
@ServerEndpoint("/websocket") // 声明为websocket 服务端并通过参数指定访问路径
public class WebSocketServer extends TextWebSocketHandler {}

接下来需要为类编写三个主要的方法，用于处理客户端的连接、消息和关闭

  • @OnOpen 注解的方法用于处理客户端的连接
  • @OnMessage 注解的方法用于处理客户端发送的消息
  • @OnClose 注解的方法用于处理客户端的关闭
@Component
@ServerEndpoint("/websocket") // 声明为websocket 服务端并通过参数指定访问路径
public class WebSocketServer extends TextWebSocketHandler {@OnOpenpublic void afterConnectionEstablished(Session session)  {System.out.println("连接成功");}@OnMessageprotected void handleTextMessage(Session session, TextMessage message)  {}@OnClosepublic void afterConnectionClosed(Session session, CloseStatus status)  {System.out.println("连接关闭");super.afterConnectionClosed(session, status);}
}

3. 配置WebSocket
通过一个config类来统一注册websocket 配置

@Configuration
public class WebSocketConfig implements WebSocketConfigurer {@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}
}

4.测试
启动项目后，在需要用到的地方通过导入websocket 包下的WebSocketServer 类来创建对象，调用该对象的sendMessage 方法即可向客户端发送消息。

2. node Express 框架下使用 WebSocket

1.安装依赖
node下我们可以使用ws库来实现WebSocket服务端，通过npm安装：

npm i ws

2. 创建WebSocket
创建一个websocket文件，编写服务端代码：

  • 通过require 导入ws库。
  • 通过new 创建WebSocket服务，并指定端口号，这样会在当前服务的域名下创建一个WebSocket服务。
  • 通过on方法监听connection事件，当客户端连接时触发该事件，并执行回调函数。
  • 通过broadcast方法实现向所有客户广播消息，实现了服务端向用户端推送消息。
const WebSocket = require('ws');
const ws = new WebSocket.Server({ port: 端口号 });ws.on('connection', function connection(ws) {// ws.send("hello")ws.clients.add(ws)});ws.broadcast = function broadcast(data) {ws.clients.forEach((client) => {if (client.readyState === WebSocket.OPEN) {client.send(data);}});};
module.exports = ws;

3. 配置
编写后将文件导出并在app.js中引入，启动服务即可。

3. 客户端使用（主要演示浏览器端）

现在的主流浏览器均内置有WebSocket对象，可以直接使用。

  • 通过new WebSocket 创建WebSocket对象，指定服务端地址。注意：地址是ws://开头，表示WebSocket协议。
  • 通过onopen方法监听连接成功事件，通过send方法向服务端发送消息。
  • 通过onmessage方法监听服务端发送的消息，通过onclose方法监听连接关闭事件。(这里可以接受到服务器返回的消息，通过消息内容判断是否需要刷新页面等操作)
  • 通过onclose方法监听连接关闭事件。
  • 通过onclose方法监听连接关闭事件。

const ws = new WebSocket("ws://localhost:指定端口")ws.onopen = () => {ws.send("hello")console.log("连接成功")
}ws.onmessage = function (event) {//   解析数据console.log(event.data)
}ws.onclose = function () {console.log("连接关闭")
}ws.onerror = function (error) {console.error("WebSocket error: " + error)
}

4.与http协议的区别

  1. 通信模式不同

HTTP：是基于请求-响应模式的，客户端发起请求，服务器响应请求。每次通信都需要建立一个新的连接（在HTTP/1.1中，可以使用持久连接来减少开销，但仍然是请求-响应模式）。
WebSocket：提供了全双工通信，客户端和服务器可以在一个持久的连接上同时发送和接收数据，不需要等待对方的响应。

  1. 持久性不同：

HTTP：每次请求都需要建立一个新的连接（或者复用一个持久连接），请求结束后连接通常会关闭。
WebSocket：一旦建立，连接会保持开放，直到客户端或服务器决定关闭它。

  1. 适用场景不同：

HTTP：适用于需要请求数据的场景，如网页浏览、文件下载、API调用等。
WebSocket：适用于需要实时通信的场景，如聊天应用、实时游戏、股票行情更新等。

  1. 安全性（重点）：

HTTP：可以通过HTTPS实现加密通信。
WebSocket：可以通过WSS（WebSocket Secure）协议实现加密。

5. 安全Websocket 协议（WSS）

WebSocket Secure（WSS）是WebSocket协议的加密版本，它在WebSocket的基础上增加了SSL/TLS层，类似于HTTPS与HTTP的关系。WSS提供了数据传输的安全性，确保了客户端和服务器之间传输的数据不会被窃听或篡改。以下是WSS的一些关键特点和使用场景：

  • 安全性：WSS通过SSL/TLS对数据进行加密，提供了针对窃听和中间人攻击的保护
  • 用户信任：用户普遍更信任HTTPS连接，因为浏览器中的“安全”指示符给人一种安全感
  • 合规性：许多行业都有数据安全的监管要求，WSS可以帮助满足这些要求。

WSS通常用于需要高安全性的实时通信场景，例如在线银行、电子邮件和医疗记录等。在这些场景中，数据的安全性和保密性至关重要，因此使用WSS来确保数据传输的安全是必要的。

在配置WSS时，通常需要设置SSL证书，并确保服务器支持SSL/TLS加密。例如，在Nginx中配置WSS，需要监听443端口（HTTPS的默认端口），并配置SSL证书和密钥，同时设置代理以将WSS请求转发到后端WebSocket服务。
注意：
在浏览器端配置时，如果网站的挂载服务配置的是https服务，则网站中无法使用ws协议，必须将ws升级为对应的wss协议。

nginx 配置wss服务


server {listen 443 ssl; # 监听 443 端口，并启用 SSLserver_name localhost; # 网站域名ssl_certificate /path/to/your/certificate.crt; # 证书文件ssl_certificate_key /path/to/your/private.key; # 私钥文件location /websocket {proxy_pass http://backend; # 后端wss服务地址proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/57911.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

AGI 之 【Dify】 之 Dify 在 Windows 端本地部署调用 Ollama 本地下载的大模型，实现 API 形式进行聊天对话

AGI 之 【Dify】 之 Dify 在 Windows 端本地部署调用 Ollama 本地下载的大模型，实现 API 形式进行聊天对话

AGI 之 【Dify】 之 Dify 在 Windows 端本地部署调用 Ollama 本地下载的大模型&#xff0c;实现 API 形式进行聊天对话 目录 AGI 之 【Dify】 之 Dify 在 Windows 端本地部署调用 Ollama 本地下载的大模型&#xff0c;实现 API 形式进行聊天对话 一、简单介绍 二、创建一个聊…
阅读更多...
python爬虫基础篇：BeautifulSoup解析界面

python爬虫基础篇：BeautifulSoup解析界面

BeautifulSoup解析界面 下载&#xff1a;pip install bs4 from bs4 import BeautifulSoupimport requestshead {user-agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0}html request…
阅读更多...
用ElementPlus开发el-tab结合router-view调用组件时需要注意多次渲染的问题

用ElementPlus开发el-tab结合router-view调用组件时需要注意多次渲染的问题

最近在用vue3elementPlus开发后台界面&#xff0c;用到右侧el-tab这个组件结合router-view实现调用&#xff0c;刚在逛csdn的时候发现一个大佬说如果把router-view放在el-tab-pane下会导致多次渲染&#xff0c;我想还有这事&#xff1f;赶紧测试一下。。。果然&#xff0c;大佬…
阅读更多...
Python数字图像处理——基于SIFT特征提取的图像拼接算法（暴力匹配、knn匹配和hist匹配）

Python数字图像处理——基于SIFT特征提取的图像拼接算法（暴力匹配、knn匹配和hist匹配）

&#xff08;1&#xff09;项目概述 本文通过Python实现基于SIFT特征提取的图像拼接算法&#xff0c;包括三种匹配策略&#xff1a;暴力匹配、KNN&#xff08;k近邻&#xff09;匹配和hist直方图的特征匹配。SIFT算法是一种在尺度和旋转上不变的特征提取算法。它能够在图像中找…
阅读更多...
Python浪漫之画星星

Python浪漫之画星星

效果图&#xff08;动态的哦&#xff01;&#xff09;&#xff1a; 完整代码&#xff08;上教程&#xff09;&#xff1a; import turtle import random import time # 导入time模块# 创建一个画布 screen turtle.Screen() screen.bgcolor("red")# 创建一个海龟&a…
阅读更多...
程序员修仙传

程序员修仙传

凡人修仙 前文修仙愿望练气期筑基期结丹期元婴期化神期大乘期成神 前文 工作好几年了&#xff0c;前前后后经历很多。一年一度的程序员日&#xff0c;回首总是惆怅&#xff0c;但时间永远向前&#xff0c;以前车之鉴未雨绸缪。工作如修仙&#xff0c;以修仙角度解读心得感想。…
阅读更多...
PostgreSQL（十三）pgcrypto 扩展实现 AES、PGP 加密，并自定义存储过程

PostgreSQL（十三）pgcrypto 扩展实现 AES、PGP 加密，并自定义存储过程

目录 一、pgcrypto 简介1.1 安装 pgcrypto 扩展1.2 pgcrypto 包含的函数 二、用法①&#xff1a;对称加密&#xff08;使用 AES、Blowfish 算法&#xff09;2.1 密钥2.2 密钥偏移量 三、用法②&#xff1a;PGP加解密3.1 什么是PGP算法&#xff1f;3.2 使用 GPG 生成密钥对3.3 列…
阅读更多...
TypeScript基础简介

TypeScript基础简介

TypeScript是Javascript的一个超集。 TypeScript在原有的基础之上又添加了编译器类型检查的功能&#xff0c;意味着如果使用ts进行开发&#xff0c;会对变量的类型进行较为严格的验证&#xff0c;防止程序员写出可能出错的代码&#xff0c;规范变成习惯&#xff0c;适合大项目开…
阅读更多...
关于我的数据库——MySQL——第四篇

关于我的数据库——MySQL——第四篇

&#xff08;叠甲&#xff1a;如有侵权请联系&#xff0c;内容都是自己学习的总结&#xff0c;一定不全面&#xff0c;仅当互相交流&#xff08;轻点骂&#xff09;我也只是站在巨人肩膀上的一个小卡拉米&#xff0c;已老实&#xff0c;求放过&#xff09;。 函数 函数名称描…
阅读更多...
SwitchHosts快速修改host文件

SwitchHosts快速修改host文件

中文说明 https://github.com/oldj/SwitchHosts/blob/master/README.zh_hans.md 下载地址 https://github.com/oldj/SwitchHosts/releases 搭配域名对应的ip地址查询工具DNS Checker - DNS Check Propagation Tool
阅读更多...
网络搜索引擎Shodan（2）

网络搜索引擎Shodan（2）

声明&#xff1a;学习视频来自b站up主 泷羽sec&#xff0c;如涉及侵权马上删除文章 声明&#xff1a;本文主要用作技术分享&#xff0c;所有内容仅供参考。任何使用或依赖于本文信息所造成的法律后果均与本人无关。请读者自行判断风险&#xff0c;并遵循相关法律法规。 感谢泷…
阅读更多...
Windows 和 Linux 下常用命令（待更新）

Windows 和 Linux 下常用命令（待更新）

Windows PowerShell 命令 1. 获取命令帮助信息 Get-Help [命令]2. 解决 Windows 平台下由于 “你需要权限才能执行此操作” 导致的文件夹删除失败 rm [需要删除的文件或文件夹] -Recurse -ForceLinux 命令 1. grep 使用正则表达式匹配字符串 grep -o -P [PATTERNS] [FILES…
阅读更多...
Vue 项目中 Webpack 常见问题详解

Vue 项目中 Webpack 常见问题详解

前言 在Vue.js项目中&#xff0c;Webpack 作为打包工具&#xff0c;处理各种静态资源和模块化的代码打包需求。尽管 Webpack 在 Vue CLI 项目中已经配置好了一些默认行为&#xff0c;但开发者在实际项目中仍然会遇到许多与资源管理、public 和 assets 目录、require 语法等相关…
阅读更多...
【力扣 | SQL题 | 每日4题】力扣2004， 1454，1613，1709

【力扣 | SQL题 | 每日4题】力扣2004， 1454，1613，1709

1. 力扣2004&#xff1a;职员招聘人数 1.1 题目&#xff1a; 表: Candidates ------------------- | Column Name | Type | ------------------- | employee_id | int | | experience | enum | | salary | int | ------------------- employee_id是此表的主键列。 经…
阅读更多...
dfs复习(一)

dfs复习(一)

题目在蓝桥云课上&#xff1a; 1.四位密码锁 四层&#xff0c;每层遍历所有可能的数字。 #include <bits/stdc.h> using namespace std; typedef long long ll; int sum0; void dfs(int depth,int ans) {if(depth4) //不再递归 {if(ans384) {sum;}return;}for(int i…
阅读更多...
Python 从入门到实战40（数据分析概述）

Python 从入门到实战40（数据分析概述）

我们的目标是&#xff1a;通过这一套资料学习下来&#xff0c;可以熟练掌握python基础&#xff0c;然后结合经典实例、实践相结合&#xff0c;使我们完全掌握python&#xff0c;并做到独立完成项目开发的能力。 上篇文章我们讨论了通过线程的相关知识。今天学习一下数据分析相…
阅读更多...
#网络安全#渗透测试# 渗透测试应用

#网络安全#渗透测试# 渗透测试应用

网络安全渗透测试是一种重要的安全评估方法&#xff0c;用于发现和评估网络系统中的安全漏洞。在进行渗透测试时&#xff0c;需要注意以下几个关键点&#xff1a; 法律和道德考量 获得授权&#xff1a;在进行渗透测试之前&#xff0c;必须获得目标系统的正式授权。未经授权的测…
阅读更多...
python实现数据库的增删改查功能，图形化版本

python实现数据库的增删改查功能，图形化版本

import tkinter from tkinter import * import psycopg2 from tkinter import messagebox#连接信息 t_conn{"dbname": "d1","user": "u1","password": "123qqq...A","port": "15400","h…
阅读更多...
vue+spreadjs开发

vue+spreadjs开发

创建vue3项目 pnpm create vite --registryhttp://registry.npm.taobao.org安装spreadjs包 pnpm install "grapecity-software/spread-sheets17.1.7" "grapecity-software/spread-sheets-resources-zh17.1.7" "grapecity-software/spread-sheets-vu…
阅读更多...
基于DDPG算法的股票量化交易

基于DDPG算法的股票量化交易

项目源码获取方式见文章末尾&#xff01; 回复暗号&#xff1a;13&#xff0c;免费获取600多个深度学习项目资料&#xff0c;快来加入社群一起学习吧。 **《------往期经典推荐------》**项目名称 1.【基于PyQTFaceNet卷积神经网络实现的学生人脸识别考勤系统】 2.【卫星图像道…
阅读更多...
最新文章

Copyright @ 2022~2023