Websocket携带参数或者携带自定义头的解决方案

WebSocket 协议本身并不直接支持像HTTP那样携带自定义头部字段,但在WebSocket连接建立之前,可以利用HTTP升级协议(Upgrade)来传递自定义头信息。具体做法是在WebSocket的HTTP握手请求中添加自定义的HTTP头。

我使用的是java的springboot框架与websocket相结合,为了达到传递自定义头和参数,我实现了

javax.websocket.server.ServerEndpointConfig.Configurator

具体代码如下:

public class MyConfigurator extends Configurator{
	@Override
    public void modifyHandshake(ServerEndpointConfig serverEndpointConfig, HandshakeRequest request, HandshakeResponse response) {
		
			/*
			*相信大家看到了ServerEndpointConfig 、HandshakeRequest 、HandshakeResponse 应该不陌生吧
			*实际上ServerEndpointConfig 继承至EndpointConfig,而HandshakeRequest 接口代表一个请求升级到WebSocket的HTTP请求
			*HandshakeResponse 接口代表一个响应升级到WebSocket的HTTP响应。
			*
			*/
		//获取请求连接中携带的头和参数;
		Map<String, List<String>> parameterMap = request.getParameterMap();
		Map<String, List<String>> headers = request.getHeaders();
		
		//接下来可以直接读取这些map中你想要的参数,将值读取出来之后存储到ServerEndpointConfig 中
		//String value = (String)parameterMap.get("authentication").get(0);
		String value = (String)headers.get("Authentication").get(0);
		//...可以验证码头信息的合法性或者直接存储到用户配置里面
		serverEndpointConfig.getUserProperties().put("Authentication",value);//存储到用户配置里面
		//...其他操作



    }


}

接下来就是如何使用这个MyConfigurator 了,我是借用的@ServerEndpoint这个注解创建了websocket端点进行操作,具体如何使用@ServerEndpoint及其一些配置细节,可以自行取参考相关文字和书籍,代码如下:

@Slf4j
@ToString
@EqualsAndHashCode(callSuper = true)
@NoArgsConstructor
@ServerEndpoint(value = "/ws/endpoint",configurator = MyConfigurator.class)//在这里
public class WebSocketEndpoint{

@OnOpen
public void onOpen(Session session, EndpointConfig endpointConfig){
	//这里就是取获取之前在MyConfigurator中存储到ServerEndpointConfig 中的参数
	String authToken = (String) endpointConfig.getUserProperties().get("Authentication");
	//...其他逻辑
}

//...@OnMessage的处理
//...@OnClose的处理
//...@OnError的处理

}

到这里整个需求就算是写完了,希望可以帮助到为此苦恼的人。

  • 9
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在前端使用 Vue 脚手架连接 WebSocket携带参数的步骤如下: 1. 安装 Socket.IO 客户端库:使用 npm 或 yarn 运行以下命令安装 Socket.IO 客户端库: ``` npm install socket.io-client ``` 2. 在 Vue 组件中创建 WebSocket 连接并携带参数:在 Vue 组件中,可以通过导入 Socket.IO 客户端库并创建一个 Socket.IO 的实例,然后在连接时携带参数: ```javascript import io from 'socket.io-client'; export default { data() { return { socket: null, userId: 'your-user-id', // 替换为实际的用户ID token: 'your-token' // 替换为实际的token }; }, created() { const params = { userId: this.userId, token: this.token // 其他参数 }; this.socket = io('http://your-api-endpoint', { query: params }); this.socket.on('connect', () => { console.log('Connected to the WebSocket server'); }); }, // ... } ``` 3. 在服务器端接收和处理参数:在服务器端,根据你使用的 Socket.IO 库,可以监听连接事件并接收和处理参数。下面以 Socket.IO 的 `socket.io` 库为例: ```javascript const server = require('http').createServer(); const io = require('socket.io')(server); io.on('connection', (socket) => { console.log('A client connected'); const userId = socket.handshake.query.userId; const token = socket.handshake.query.token; // 其他参数 console.log('Received parameters:', { userId, token }); // 广播给其他客户端 socket.broadcast.emit('chat message', { userId, token }); socket.on('disconnect', () => { console.log('A client disconnected'); }); }); server.listen(3000, () => { console.log('Server listening on port 3000'); }); ``` 在上述示例中,前端在连接时,将参数通过 `query` 选项发送给服务器端。服务器端通过 `socket.handshake.query` 获取接收到的参数,并进行相应处理。然后,服务器端可以向客户端发送消息或广播给其他连接的客户端。 请确保将 `'http://your-api-endpoint'` 替换为实际的 WebSocket 服务器地址,将 `'your-user-id'` 和 `'your-token'` 替换为实际的用户ID和token。另外,还需确保 Socket.IO 连接的参数格式与你的实际情况相匹配。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值