websocket链接携带参数

前端创建链接时官方提供的构造函数

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

websocket携带参数支持两种方式

在url后面拼接,类似以get请求

var socket = new WebSocket('ws://example.com/socket?token=' + YOUR_TOKEN);

使用protocols,token不要有特殊符号之类,逗号,横杠等也不要有,要不前端构造函数会报错

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

后台获取

package cn.bool.business.framework.websocket.core.security;

import cn.bool.business.framework.security.core.LoginUser;
import cn.bool.business.framework.security.core.filter.TokenAuthenticationFilter;
import cn.bool.business.framework.security.core.util.SecurityFrameworkUtils;
import cn.bool.business.framework.websocket.core.util.WebSocketFrameworkUtils;
import org.apache.commons.lang3.StringUtils;
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.web.socket.WebSocketHandler;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.server.HandshakeInterceptor;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Map;

/**
* 登录用户的 {@link HandshakeInterceptor} 实现类
*
* 流程如下:
* 1. 前端连接 websocket 时,会通过Sec-WebSocket-Protocol协议传输token
*/
public class LoginUserHandshakeInterceptor implements HandshakeInterceptor {

     @Override
     public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response,
     WebSocketHandler wsHandler, Map<String, Object> attributes) {     // HttpServletRequest req = ((ServletServerHttpRequest) request).getServletRequest();
     // String header = request.getHeader(WS_LOGIN_USER_HEADER);     // 不强转也可以使用     HttpHeaders headers = request.getHeaders();
     List<String> list = headers.get("Sec-WebSocket-Protocol");
     if (CollectionUtil.isNotEmpty(list)) {
          String token = list.get(0);
     }     // 自己项目中登录校验逻辑 TODO
     return true;
     }

     @Override
     public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response,
     WebSocketHandler wsHandler, Exception exception) {          // 需要将前端自定义协议头Sec-WebSocket-Protocol原封不动返回回去,否则会报错
         HttpServletRequest httpRequest = ((ServletServerHttpRequest) request).getServletRequest();
         HttpServletResponse httpResponse = ((ServletServerHttpResponse) response).getServletResponse();
         if (StringUtils.isNotEmpty(httpRequest.getHeader("Sec-WebSocket-Protocol"))) {
             httpResponse.addHeader("Sec-WebSocket-Protocol", httpRequest.getHeader("Sec-WebSocket-Protocol"));
         }
     }

}

  • 6
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在前端使用 Vue 脚手架调用 WebSocket 接口并携带参数的步骤下: 1. 在 Vue 组件中创建 WebSocket 连接:首先,在 Vue 组件中创建一个 WebSocket 实例,并在 `created`子函数中进行连接: ```javascript import { mapState } from 'vuex'; export default { data() { return { socket: null }; }, created() { this.socket = new WebSocket('ws://your-server-address'); this.socket.onopen = () => { console.log('Connected to the WebSocket server'); // 连接成功后发送参数 const params = { userId: this.userId, token: this.token // 其他参数 }; this.socket.send(JSON.stringify(params)); }; this.socket.onmessage = (event) => { const message = JSON.parse(event.data); console.log('Received message:', message); // 处理接收到的消息 }; this.socket.onclose = () => { console.log('Disconnected from the WebSocket server'); }; }, computed: { ...mapState(['userId', 'token']) } } ``` 2. 在服务器端接收和处理参数:在服务器端,根据你使用的 WebSocket 库,可以监听连接事件并接收和处理参数。下面以 `ws` 库为例: ```javascript const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8080 }); wss.on('connection', (ws) => { console.log('A client connected'); ws.on('message', (message) => { // 处理接收到的消息 const params = JSON.parse(message); console.log('Received parameters:', params); // 发送消息给客户端 ws.send('Hello, client!'); }); ws.on('close', () => { console.log('A client disconnected'); }); }); ``` 在上述示例中,前端在连接成功后,会将参数以 JSON 字符串的形式发送给服务器端。服务器端接收到消息后,将其解析为参数,并进行相应处理。然后,服务器端可以向客户端发送消息。 请注意,上述示例中的参数发送方式仅为示例,并不具体指定 `userId` 和 `token` 的来源,你可以根据你的项目需求进行相应的调整。另外,还需确保 WebSocket 连接的地址、端口和参数的格式与你的实际情况相匹配。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值