[前端基础]websocket协议

news2025/2/23 14:07:43

(1)websocket

websocket(简写为ws),是一种轻量化的协议,经过最开始的握手阶段以后,前后端之间允许自由地发送信息不受限制(建议发送json字符串).虽然理论上这个东西是属于协议内容,但是已经被疯狂封装得像框架一样了.

websocket协议具有天然的优势处理前端多线程并发,并且只需要一个后端就能完成服务.在各大视频网站上经常能见到使用ws技术构建的简单聊天室项目.难能可贵的是,java,javascript都引入了相关的内容.

本文主要介绍使用,对标面向对象的实验,需要详细看待原理建议去看文档内容

另外,websocket最重要的是四种状态和他们的监听函数,open,close,message,error

分别代表:某个用户开启服务,某个用户关闭服务,某一端接收信息,某一端发生错误

(2)前端部署和发送信息

1.在前端部署websocket内容

 websocket ws = new WebSocket("ws://127.0.0.1:8080/imserver/" + MyUsername);

很简单,直接创建websocket即可连接到后端(后端这个网址怎么来的我们后续再讨论,这个myUsername是我自己加上的内容,相当于传入一个参数,可以先不用管)

2.前端发送信息

      let oj={
        signal:8,
        to:self.counterpart
      }
      self.ws.send(JSON.stringify(oj));

我这里举了个例子,建立了一个对象,然后转化为json字符串,直接找到对应的ws对象,然后使用send即可

3.前端接收信息

前端接收信息和厚度按一样,建立事件监听器,然后创建回调函数

    this.ws.onopen = function () {
      
    }

    this.ws.onclose=function(){
    
    }

    this.ws.onmessage = function (event) {
     //event是个接收到的1信息
    }

(3)后端部署websocket

后端部署websocket有点麻烦....这里主要讲解springboot框架下的部署

首先在pom文件中部署如下几个依赖

 <!--websocket启动器-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
        <!--web启动器-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--热部署内容(不知道是干啥的)-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>

然后创建如下几个文件

 webConfig,这个是打开后端的拦截器,防止出现不能访问的情况

package com.example.demochat.common.Config;

import com.example.demochat.component.AuthInterceptor;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new AuthInterceptor()).addPathPatterns("/**").excludePathPatterns("/imserver/**");
    }
    
}

websocketConfig,ws有关的部署

package com.example.demochat.common.Config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }
}

链接的时候用到的一个继承类

package com.example.demochat.component;

import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

@Component
public class AuthInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        // 在此处实现身份验证逻辑
        return true; // true 表示继续执行后续的拦截器或处理器方法,false 则会中断请求处理
    }
    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
                           ModelAndView modelAndView) throws Exception {
        // 请求处理之后进行调用,但是在视图被渲染之前(Controller方法调用之后)
    }
    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex)
            throws Exception {
        // 在整个请求结束之后被调用,也就是在DispatcherServlet渲染了对应的视图之后执行(主要是用于资源清理工作)
    }
}

最后是核心文件,

这个东西里面就是我们websocket的基本逻辑

首先是建立一个链接,要借用注解来声明这里是都服务器的终端

里面会用到那些监听方法,有一个好消息是,我们不需要继承websocket这个类或者说这个接口,然后重写里面的方法.现在可以通过注释来给几个监听函数添加具体的回调

//建立一个双通道的webSocket类

@ServerEndpoint("/imserver/{username}")
//这是一个声明,声明这里是服务器的终端,可以通过这个路径访问
//{}代表占位符,可以通过@PathParam注解获取这个参数

@Component
public class WebSocketServer {

    //下面是四个基础方法,当触发对应事件的时候,注解就会调用这些方法


    @OnOpen
    public void onOpen(Session session, @PathParam("username") String username) throws IOException {
           
    }

    //移除某个用户
    @OnClose
    public void onClose(Session session, @PathParam("username") String username) throws IOException {
           
    }

  
    @OnMessage
    public void onMessage(String message,Session session,@PathParam("username") String username) throws IOException {
           
    }


    @OnError
    public void onError(Session session , Throwable err){//这里的参数类型必须是可抛出"Throwable"
      
    }

}

对应的注解,标志着这个函数会在什么事件发生的时候调用

另外注意其中的参数,Session对象代表的是当前触发事件的具体对象,也就是前端窗口/用户,当用户触发对应事件的时候,就会填入对应参数中message参数代表的是传递进来的信息

Throwable是需要抛出的从错误

这些参数是必须的

2.后端发送请求:

 session.getBasicRemote().sendText(message);
直接让对应的窗口对象接收即可

利用session对象的对应方法发送消息即可

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Android---Glide的基本使用

目录 Glide 基本使用 Glide 进阶 Glide 是一个快速高效的 Android 图片加载库&#xff0c;可以自动加载网络、本地文件&#xff0c;app 资源中的图片&#xff0c;注重于平滑的滚动。 Glide 第一次加载一张图片后&#xff0c;就会自动帮我们把这张图片加入到内存中进行管理。…

Linux内核同步之RCU机制基础

Why RCU 1. 中断与抢占 当一个进程被时钟中断打断后&#xff0c;kernel运行tick中断处理程序&#xff08;一般是top half&#xff09;&#xff0c;中断处理程序运行结束后&#xff0c;有两种情况&#xff1a; 之前的进程获得CPU继续运行。 另一个进程获得了CPU开始运行&…

AI智慧安监:打电话/玩手机智能检测,构筑安全生产新防线

1、方案背景 在油库、加油站、化工厂等场景中&#xff0c;安全生产是首要的监管问题&#xff0c;因为有易燃物品的存放&#xff0c;打电话很容易引起火灾爆炸等安全事故&#xff0c;造成巨大的生命和财产损失。因此&#xff0c;对人员行为的监管是安全的关键&#xff0c;在一些…

计算机图形学 | 实验六:旋转立方体

计算机图形学 | 实验六&#xff1a;旋转立方体 计算机图形学 | 实验六&#xff1a;旋转立方体Z-缓冲GLM函数库PVM矩阵PVM矩阵的使用 华中科技大学《计算机图形学》课程 MOOC地址&#xff1a;计算机图形学&#xff08;HUST&#xff09; 计算机图形学 | 实验六&#xff1a;旋转…

怎么看待QA(软件测试)漏测bug?

先抛出我的2个观点&#xff1a; 1、漏测不一定是测试的锅。但当问题发生时&#xff0c;测试第一时间不要去拒绝推卸责任&#xff0c;而是要先去解决漏测问题。 2、漏测问题的及时处理很重要&#xff0c;但是避免再次漏测更重要。 为了将此问题阐述的更清楚&#xff0c;我将通过…

SSM框架学习-DI依赖注入方式实例

DI依赖注入&#xff1a;依赖注入&#xff08;Dependency Injection, DI&#xff09;是一种设计模式&#xff0c;用于将一个对象所需要的其他对象的引用或依赖关系从代码中解耦出来&#xff0c;将其交由某个第三方来管理&#xff0c;使得对象本身更加独立&#xff0c;便于测试和…

使用读写锁提高并发

我们想要的是&#xff1a;允许多个线程同时读&#xff0c;但只要有一个线程在写&#xff0c;其他线程就必须等待。 ReadWriteLock ReadWriteLock的作用&#xff1a; 只允许一个线程写入&#xff08;其他线程既不能写入也不能读取&#xff09;&#xff1b;没有写入时&#xf…

基于深度学习的三维重建网络PatchMatchNet(三):如何利用patchmatchnet完成自己场景的数据集制作与利用自己的数据完成三维重建工作

目录 1.如何使用本篇博客 1.1 patchmatchnet网络环境配置 1.2 colmap环境配置 2.如何利用colmap制作自己的三维重建数据集 2.1 采集数据 2.2 使用colmap计算位姿 2.3 转换位姿到MVS读取的格式 2.4 剔除离群图片 2.5 运用patchmatchnet进行三维重建 1.如何使用本篇博客 …

【MySQL】简单使用

数据库&#xff1a;文件&#xff0c;管理系统 类别&#xff1a;关系型&#xff0c;非关系型&#xff08;nosql&#xff09; C/S模式&#xff08;客户端服务器&#xff09; mysql登录 用户名&密码 默认管理员&#xff1a;root 登录&#xff1a;Linux管理员身份运行客户…

为什么二极管具有单向导通性

大家都知道二极管具有单向导通性&#xff0c;比如一个双极性的信号通过二极管后会变成一个单极性的信号。 为了弄清这个问题先来看一下二极管的构成。 在纯净的硅晶体中掺入五价元素&#xff0c;比如磷&#xff0c;就形成了N型半导体&#xff0c;掺入的五价元素多余的电子很容…

汉明码简单计算方法

正算 看一张图 其中标绿底色的为汉明码校验位&#xff0c;可以发现&#xff0c;这些位置的2进制里面只有一个1&#xff0c;其他位上都是0。 先说结论&#xff1a;校验位上的1在第几个位上&#xff0c;就会用来保证位置的2进制里面该位上为1的位置上的1的个数为偶数。 比如&…

11_Uboot启动流程_3

目录 run_main_loop函数详解 cli_loop函数详解 cmd_process函数详解 run_main_loop函数详解 uboot启动以后会进入3秒倒计时,如果在3秒倒计时结束之前按下按下回车键,那么就,会进入uboot的命令模式,如果倒计时结束以后都没有按下回车键,那么就会自动启动Linux内核,这个功能…

MySQ ---- 函数

函数 函数是指一段可以直接被另一段程序调用的程序或代码。MySQL 内置了很多函数&#xff0c;开发人员只需要调用使用即可。查询语句中已经使用过了一些聚合函数。下面还有些常用的函数需要掌握。 函数应用场景举例 函数的分类 ① 字符串函数 ② 数值函数 ③ 日期函数 ④ 流程…

chap和ppp认证配置+MGRE实验

题目要求 1.R2为ISP&#xff0c;其上只能配置IP地址 2.R1-R2之间为HDLC封装 3.R2-R3之间为ppp封装&#xff0c;pap认证&#xff0c;R2为主认证方 4.R2-R4之间为ppp封装&#xff0c;chap认证&#xff0c;R2为主认证方 5.R1,R2,R3构建MGRE环境&#xff0c;仅R1的IP地址固定 6.内…

OpenPCDet系列 | 4.KITTI数据集数据加载流程代码解析

文章目录 数据加载流程0. create_kitti_infos1. __getitem__函数2. prepare_data函数3. collate_batch函数数据加载流程 这里记录一下具体用到的那些数据形式,整个kitti数据集的处理框架图如下所示: 在数据集处理到获取一个batch数据的整个流程的入口如下: # 开始迭代每…

STL常用容器

目录 一、string容器 1、基本概念 2、构造函数 3、赋值操作 4、字符串拼接 5、查找和替换 6、字符串比较 7、字符存取 8、插入与删除 9、获取字串 二、vector容器 1、基本概念 2、构造函数 3、赋值操作 4、容量和大小 5、插入和删除 6、数据存取 7、互换容器…

hadoop shell操作HDFS文件

一.常用的 hadoop shell 文件路径需要自己有才行&#xff0c;示例中的文件路径是本人自己的文件路径&#xff0c;不是公共文件路径&#xff0c;如何建立自己的数仓&#xff0c;查看本人 大数据单机学习环境搭建 相关文章 1.1查看 创建 删除 # 列出当前hdfs所存贮的文件 hado…

模式串匹配算法(朴素模式匹配与KMP)的机算与手算。

一.朴素模式匹配 1.机算 其实就是暴力匹配。 使用双指针 i (指向主串) j (指向模式串) 从主串 S 第一字符起,与模式串 T, 第一个字符比较&#xff0c;   ①若相同&#xff0c;则 i 与 j 统一向后移   ②若遇到 i 与 j 指向字符不同&#xff0c;回溯 i j 指针。继续如此&a…

经验分享|如何搭建产品帮助文档

作为一款优秀的产品&#xff0c;除了功能强大、易于使用等特点外&#xff0c;相应的使用说明和帮助文档也是至关重要的&#xff0c;这些说明和文档可以帮助用户更好地使用这款产品&#xff0c;并解决在使用过程中的问题。本篇文章将为大家详细介绍如何搭建一份优秀的产品帮助文…

12-Vue技术栈之Vuex的使用

目录 1、理解 vue1.1 vuex 是什么1.2 什么时候使用 Vue1.3 图解两种方式实现数据共享 2、搭建vuex环境2.1 下载vuex2.2 配置文件 3、基本使用3.1 求和案例纯vue写法3.2 求和案例vuex写法 4、getters的使用5、四个map方法的使用5.1 求和案例 6、 模块化命名空间6.1求和案例改造 …