首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Laravel Echo尝试连接wss而不是ws

基础概念

Laravel Echo 是一个 JavaScript 库,用于在浏览器中实现实时通信。它通常与 Laravel Echo Server 或 Pusher 一起使用,支持 WebSocket 协议(ws 或 wss)进行实时数据传输。

优势

  • 实时性:WebSocket 提供了双向通信通道,允许服务器主动向客户端推送数据。
  • 低延迟:相比轮询,WebSocket 的延迟更低,用户体验更好。
  • 资源高效:WebSocket 连接一旦建立,后续的数据传输开销很小。

类型

  • ws:WebSocket 协议的非加密版本,适用于本地开发或内部网络环境。
  • wss:WebSocket 协议的加密版本,通过 TLS/SSL 加密数据传输,适用于生产环境。

应用场景

  • 实时聊天:如在线客服、即时通讯应用。
  • 实时通知:如邮件、短信、应用内通知。
  • 实时数据更新:如股票行情、游戏状态更新。

为什么 Laravel Echo 尝试连接 wss 而不是 ws?

Laravel Echo 默认尝试连接 wss(WebSocket Secure),因为 wss 提供了数据传输的安全性。在生产环境中,出于安全考虑,建议使用 wss 来保护数据传输。

解决问题的方法

如果你希望 Laravel Echo 连接到非加密的 WebSocket 服务器(ws),可以在配置文件中进行修改。

修改配置

  1. 打开 config/broadcasting.php 文件。
  2. 找到 connections 部分,修改 redispusher 的配置:
代码语言:txt
复制
'connections' => [
    'redis' => [
        'driver' => 'redis',
        'connection' => 'default',
        'url' => env('REDIS_URL'),
    ],

    'pusher' => [
        'driver' => 'pusher',
        'key' => env('PUSHER_APP_KEY'),
        'secret' => env('PUSHER_APP_SECRET'),
        'app_id' => env('PUSHER_APP_ID'),
        'options' => [
            'cluster' => env('PUSHER_APP_CLUSTER', 'mt1'),
            'useTLS' => false, // 设置为 false 以使用 ws 而不是 wss
        ],
    ],
],
  1. 修改 .env 文件中的相关配置:
代码语言:txt
复制
BROADCAST_DRIVER=pusher
PUSHER_APP_KEY=your-pusher-app-key
PUSHER_APP_SECRET=your-pusher-app-secret
PUSHER_APP_ID=your-pusher-app-id
PUSHER_APP_CLUSTER=mt1
  1. 重启 Laravel Echo Server 或相关服务。

示例代码

代码语言:txt
复制
import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: false, // 设置为 false 以使用 ws 而不是 wss
});

参考链接

通过以上步骤,你可以控制 Laravel Echo 连接到 wswss。在生产环境中,建议使用 wss 以确保数据传输的安全性。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Jmeter 压测 ws(s)

    有过Socket相关开发经验的人应该都不会陌生,ws协议就是WebSocket协议,wss对应就是在SSL上运行的WebSocket协议。...一般是80端口,https和wss一般是433端口) Timeout(单位:毫秒) Connection:连接等待完成的最长时间 Response:消息响应的最大等待时间 WebSocket Request...如果勾上表示连接会一直存在,否则在第一次响应后该连接就会被关闭 Request data:请求要发送的数据 Path:WebSocket端点路径   为了方便,下面以一个在线的WebSocket网站来开展测试...分别在Server Name or IP一栏中输入:echo.websocket.org,在Request data一栏中输入:Send test。启动测试计划,得到如下响应结果。 ?...聚合报告响应 wss测试   相比于ws测试,wss的测试也仅需修改两处地方。分别将Port Number修改为:443,以及将Protocol修改为:wss

    3.5K20

    Nginx配置WSS

    简单点说,WebSocket 就是减小客户端与服务器端建立连接的次数,减小系统资源开销,只需要一次 HTTP 握手,整个通讯过程是建立在一次连接/状态中,也就避免了HTTP的非状态性,服务端会一直与客户端保持连接...wswss Websocket使用 wswss 的统一资源标志符,类似于 HTTP 或 HTTPS ,其中 wss 表示在 TLS 之上的 Websocket ,相当于 HTTPS 了。...如: ws://example.com/echo wss://example.com/echo 默认情况下,Websocket 的 ws 协议使用 80 端口;运行在TLS之上时,wss 协议默认使用...其实说白了,wss 就是 ws 基于 SSL 的安全传输,与 HTTPS 一样样的道理。...如果你的网站是 HTTPS 协议的,那你就不能使用 ws:// 了,浏览器会 block 掉连接,和 HTTPS 下不允许 HTTP 请求一样 Nginx配置webscoket upstream websocket

    2.8K20

    【JS 逆向百例】WebSocket 协议爬虫,智慧树扫码登录案例分析

    WebSocket 协议简称为 WS 或者 WSS(WebSocket Secure),其发送请求的 URL 以 ws:// 或者 wss:// 开头,WSSWS 的加密版本,类似于 HTTP 与...我们可以直接搜索这个字符串,发现是通过一个接口传过来的,其中 img 就是二维码图片的 base64 值,qrToken 就是客户端发送的那串字符串,如下图所示: [04.png] 这里需要注意的是,并不是所有的...= websocket.WebSocketApp( "ws://echo.websocket.org/", on_open=on_open, on_message=on_message...(run, (qr_token,)) def wss(): # websocket.enableTrace(True) # 是否显示连接详细信息 ws = websocket.WebSocketApp...(run, (qr_token,)) def wss(): # websocket.enableTrace(True) # 是否显示连接详细信息 ws = websocket.WebSocketApp

    2.1K30

    记一次 websocket 实战,“我没有拿到回执呀”

    脑图如下: 实战代码 弄清需求后,就开始刷刷刷写代码了✍(这里实现 web 前端 A1 的逻辑) 此处通过wss://echo.websocket.org 来模拟连接地址: 重点说明: 因为拿到 回执...实战代码(参数做了简化,可直接复制在控制台上调用测试) var limitConnect = 20 // 断线重连次数 var timeConnect = 0 const service = 'wss...://echo.websocket.org' // socket初始化 const webSocketInit = function() { var ws = new WebSocket(service...) let ws_close_correctly = false ws.onopen = function() { console.log('已连接TCP服务器') } ws.onmessage...80 和 443 端口上工作,并支持 HTTP 代理和中介,从而使其与 HTTP 协议兼容; socket 本质是对 TCP/IP 协议栈的封装,它提供了一个针对 TCP 或者 UDP 编程的接口,并不是另一种协议

    42920

    传统轮询、长轮询、服务器发送事件与WebSocket

    长轮询(Long Polling) 上面两种传统的轮询方式都存在一个严重缺陷:程序在每次请求时都会新建一个HTTP请求,然而并不是每次都能返回所需的新数据。...通过SSE,客户端可以自动获取数据更新,不用重复发送HTTP请求。一旦连接建立,“事件”便会自动被推送到客户端。服务器端SSE通过“事件流(Event Stream)”的格式产生并推送事件。...如果需要强行支持IE和部分移动端浏览器,可以尝试EventSource Polyfill(本质上仍然是轮询)。...服务器(Node.js): var WebSocketServer = require('ws').Server; var wss = new WebSocketServer({port: 8080})...("ws://localhost:8080"); ws.onopen = function (event) { ws.send("Hello there!")

    2.9K30
    领券