websocket如何携带header或参数

这篇具有很好参考价值的文章主要介绍了websocket如何携带header或参数。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一  websocket如何携带参数

相信用过websocket的同学都知道,直接在url后面拼接参数即可。不多做阐述。

var ws = new WebSocket("ws://url?userid=1");

二  websocket如何携带header

最近项目组接到新需求,需要websocket连接时,在header里面传递token,由于token较长,不适合在url中直接拼接。

网上查阅了相关的资料,websocket没有像http那样可以只定义请求头的一些参数,只有一个Sec-WebSocket-Protocol属性用于自定义子协议。

意思就是说可以将token当做一个参数传递给后端,只不过参数的封装形式是以Sec-WebSocket-Protocol为key的一个header属性值。

后台接收到websocket连接后,可以通过下述代码获取到token值。

request.getHeader("Sec-WebSocket-Protocol")

需要注意的是,如果前端通过websocket连接时指定了Sec-WebSocket-Protocol,后端接收到连接后,必须原封不动的将Sec-WebSocket-Protocol头信息返回给前端,否则连接会抛出异常。

--------------------------------------------------------------------------

前端代码格式

var aWebSocket = new WebSocket(url,[protocols]);

url
要连接的URL;WebSocket服务器响应的URL。
protocols 可选
一个协议字符串或者一个包含协议字符串的数组。这些字符串用于指定子协议,这样单个服务器可以实现多个WebSocket子协议(例如,您可能希望一台服务器能够根据指定的协议(protocol)处理不同类型的交互)。如果不指定协议字符串,则假定为空字符串。

--------------------------------------------------------------------------

介绍就到这里,直接上前后端完整代码示例,方便后来者学习。

前端

var webSocket = new WebSocket(url,[token]);

后端文章来源地址https://www.toymoban.com/news/detail-819146.html

<dependency>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
package com.xx;

import org.apache.commons.lang3.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.http.HttpStatus;
import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.http.server.ServletServerHttpRequest;
import org.springframework.http.server.ServletServerHttpResponse;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.HandshakeInterceptor;
import org.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Map;
import java.util.Objects;

/**
 * webSocket握手拦截器
 * @since 2022年9月16日16:57:52
 */
@Component
public class PortalHandshakeInterceptor implements HandshakeInterceptor {

    private final Logger logger = LoggerFactory.getLogger(PortalHandshakeInterceptor.class);

    @Resource
    private UserClient userClient;

    /**
     * 初次握手访问前
     * @param request
     * @param serverHttpResponse
     * @param webSocketHandler
     * @param map
     * @return
     */
    @Override
    public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse serverHttpResponse, WebSocketHandler webSocketHandler, Map<String, Object> map) {
        logger.info("HandshakeInterceptor beforeHandshake start...");
        if (request instanceof ServletServerHttpRequest) {
            HttpServletRequest req = ((ServletServerHttpRequest) request).getServletRequest();
            String authorization = req.getHeader("Sec-WebSocket-Protocol");
            logger.info("authorization = {}", authorization);
            if (Objects.isNull(userClient)){
                userClient = (UserClient) SpringContextUtil.getBean("userClient");
            }
            TokenVO tokenVO = userClient.checkToken(authorization, authorization);
            Long userId = tokenVO.getUserId();
            logger.info("userId = {}, tokenVO = {}", userId, tokenVO);
            if (Objects.isNull(userId)){
                serverHttpResponse.setStatusCode(HttpStatus.FORBIDDEN);
                logger.info("【beforeHandshake】 authorization Parse failure. authorization = {}", authorization);
                return false;
            }
            //存入数据,方便在hander中获取,这里只是在方便在webSocket中存储了数据,并不是在正常的httpSession中存储,想要在平时使用的session中获得这里的数据,需要使用session 来存储一下
            map.put(MagicCode.WEBSOCKET_USER_ID, userId);
            map.put(MagicCode.WEBSOCKET_CREATED, System.currentTimeMillis());
            map.put(MagicCode.TOKEN, authorization);
            map.put(HttpSessionHandshakeInterceptor.HTTP_SESSION_ID_ATTR_NAME, req.getSession().getId());
            logger.info("【beforeHandshake】 WEBSOCKET_INFO_MAP: {}", map);
        }
        logger.info("HandshakeInterceptor beforeHandshake end...");
        return true;
    }

    /**
     * 初次握手访问后,将前端自定义协议头Sec-WebSocket-Protocol原封不动返回回去,否则会报错
     * @param request
     * @param serverHttpResponse
     * @param webSocketHandler
     * @param e
     */
    @Override
    public void afterHandshake(ServerHttpRequest request, ServerHttpResponse serverHttpResponse, WebSocketHandler webSocketHandler, Exception e) {
        logger.info("HandshakeInterceptor afterHandshake start...");
        HttpServletRequest httpRequest = ((ServletServerHttpRequest) request).getServletRequest();
        HttpServletResponse httpResponse = ((ServletServerHttpResponse) serverHttpResponse).getServletResponse();
        if (StringUtils.isNotEmpty(httpRequest.getHeader("Sec-WebSocket-Protocol"))) {
            httpResponse.addHeader("Sec-WebSocket-Protocol", httpRequest.getHeader("Sec-WebSocket-Protocol"));
        }
        logger.info("HandshakeInterceptor afterHandshake end...");
    }

}

到了这里,关于websocket如何携带header或参数的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序如何跳转到tabBar页面、如何携带参数过去

    微信底部如果用的是系统自动的 tabbar ,也就是在 app.json 中配置的底部路由: 需要注意以下两个问题: 比如,个人中心是 tabBar ,使用 navigator url=\\\"/pages/me/me\\\"个人中心/navigator 跳转时,无法跳转,也不会给任何提示。 如果在普通标签上使用 wx.navigateTo 跳转到任意 tabBar 页面,则

    2024年02月05日
    浏览(77)
  • 微信小程序之间是如何跳转的,并携带参数

    要实现小程序之间的跳转,需要使用小程序的跳转 API。具体步骤如下:         1、在原小程序中,使用  wx.navigateToMiniProgram  API 跳转到目标小程序。         2、在目标小程序中,接收参数并进行处理。在目标小程序中,可以使用wx.getLaunchOptionsSync API获取原始启动参

    2024年02月16日
    浏览(46)
  • 微信小程序中如何携带参数跳转到tabBar页面

    在小程序中使用了tabBar组件之后就不能用wx.navigateTo跳转到tabBar页面了 , 能跳转到tabBar页面的方法有以下两种   但是使用第一种方法时,会因为这种方法在路径后不能携带参数,所以行不通 那么就只能用第二种方法 , 用wx.reLaunch进行跳转 , 地址后跟上自己想要的参数 , 或者用wx

    2024年02月11日
    浏览(71)
  • 【微信小程序】使用 wx.request 方法来发送POST网络请求,携带RequestBody参数

    在微信小程序中,你可以使用 wx.request 方法来发送网络请求。以下是将上述 Java 代码转换为微信小程序版本的示例: 在上述代码中,我们使用 wx.request 方法发送 POST 请求,并将请求的 URL、请求体数据、请求头等信息进行相应的设置。请求成功后,会在回调函数的 success 中处

    2024年02月15日
    浏览(52)
  • ajax请求携带自定义请求头header(跨域和同域)

    1. ajax跨域请求(无cookie、无header)案例(java) (1)启动一个java web项目,配置两个域名(host),czt.ming.com、czt.casicloud.com, java后端代码如下 : 注意:Access-Control-Allow-Origin (2)前端页面代码如下: (3)测试ajax跨域请求: 通过http://czt.casicloud.com/xxx/xxx访问页面,js触发aja

    2023年04月26日
    浏览(37)
  • WebSocket 网络协议(实时更新 )

    WebSocket 是一种在客户端和服务器之间建立双向通信信道的网络协议。它在客户端和服务器之间建立一个持久的、全双工的连接,允许数据在两个方向上实时传输,而不需要像HTTP一样进行多次请求和响应。  WebSocket 的主要优势是减少了服务器和客户端之间的通信延迟,因为数

    2024年01月17日
    浏览(47)
  • 【spring(六)】WebSocket网络传输协议

    🌈键盘敲烂,年薪30万🌈 目录 核心概要: 概念介绍: 对比HTTP协议:⭐ WebSocket入门案例:⭐ websocket对比http         WebSocket是Web服务器的一个组件,WebSocket是一种基于TCP的新的 网络传输协议 ,它实现了浏览器与服务器全双工通信——浏览器只需要完成 一次握手 ,两者之

    2024年02月05日
    浏览(42)
  • SpringSecurity整合WebSocket并携带token

    目的 导入SpringSecurity的SpringBoot项目,在连接WebSocket时进行token校验 实现 SpringBoot整合Websocket的相关知识就不过多赘述,本文主要介绍WebSocket权限校验相关 1. 前端 WebSocket连接 windowTag是生成的随机窗口唯一标识符,token是用户登录后生成的令牌token 当前端发起WebSocket连接请求时

    2024年02月04日
    浏览(31)
  • WebSocket | 基于TCP的全双工通信网络协议

    ​🍃作者介绍:双非本科大三网络工程专业在读,阿里云专家博主,专注于Java领域学习,擅长web应用开发、数据结构和算法,初步涉猎Python人工智能开发和前端开发。 🦅主页:@逐梦苍穹 📕所属专栏:Java EE ✈ 您的一键三连,是我创作的最大动力🌹 WebSocket 是基于 TCP 的一

    2024年02月19日
    浏览(74)
  • 持久双向通信网络协议-WebSocket-入门案例实现demo

    1 介绍 WebSocket 是基于 TCP 的一种新的 网络协议 。它实现了浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手,两者之间就可以创建 持久性 的连接, 并进行 双向 数据传输。 HTTP协议和WebSocket协议对比: HTTP是 短连接 (一次响应完即消除) WebSocket是 长连接

    2024年01月16日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包