前端连接websocket服务器404

失踪人口回归~

项目场景:

在这里插入图片描述

问题描述:

因为后端是https,所以需要将协议转换成wss协议,因为本地启动项目,通过ws协议连接是成功的,所以ip、端口、路径等都没问题


原因分析:

经过一系列尝试,发现是Nginx的配置问题,需要在location下增加如下配置,以便让Nginx支持websocket


解决方案:

location / {
    ###以下配置是Nginx支持websocket
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

在这里插入图片描述

碎碎念:坚持是一件很难的事情,尤其是在丧失对技术的热情之后。。。

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端连接 WebSocket 可以使用 JavaScript 的 WebSocket API 来实现。以下是连接 WebSocket 的基本步骤: 1. 创建一个 WebSocket 对象:使用 `new WebSocket(url)` 构造函数创建一个 WebSocket 对象,其中 `url` 是 WebSocket 服务器的地址。例如:`const socket = new WebSocket('ws://your-websocket-server.com')`。 2. 监听 WebSocket 事件:WebSocket 对象有几种事件可以监听,包括 `open`、`message`、`error` 和 `close`。可以使用 `socket.addEventListener(eventName, eventHandler)` 方法来监听这些事件。例如: ```javascript socket.addEventListener('open', () => { console.log('WebSocket 连接已建立'); }); socket.addEventListener('message', (event) => { console.log('收到消息:', event.data); }); socket.addEventListener('error', (error) => { console.error('WebSocket 错误:', error); }); socket.addEventListener('close', () => { console.log('WebSocket 连接已关闭'); }); ``` 3. 发送和接收消息:一旦连接建立成功,就可以使用 `socket.send(data)` 方法发送消息给服务器,其中 `data` 是要发送的数据。服务器发送的消息会通过 `message` 事件的 `event.data` 属性接收到。 4. 关闭 WebSocket 连接:如果需要关闭 WebSocket 连接,可以使用 `socket.close(code, reason)` 方法,其中 `code` 是可选的关闭代码,而 `reason` 是可选的关闭原因。 这些是连接前端WebSocket 服务器的基本步骤。你可以根据具体的应用场景和需求来处理接收和发送的数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值