当前位置: 首页 > news >正文

【苍穹】完美解决由于nginx更换端口号导致无法使用Websocket

一、报错信息 

进行到websocket开发的过程中,遇到了前端报错,无法连接的提示:

经过F12排查很明显是服务端和客户端并没有连接成功。这里就涉及到之前的坑,现在需要填上了。

二、报错原因和推导

        应该还记得刚开苍穹的第一天配置前端环境时,会发现ngnix启动不了吧?排查原因后,发现是默认的80端口被系统进程占用了,你为了方便后续的测试,将ngnix的默认端口改成了8888。

系统默认的80端口是被http服务给占用了

      与此同时,苍穹的前端环境几乎是固定死了的,也就是有一些配置方面的东西,还是按照着80端口来的,这样一来,Websocket自然是连接不上的。

        所有就衍生出下面两种解决方法

三、解决方法

1. 修改ngnix配置文件 为80端口,同时终止原先系统进程占用的80端口 

修改配置文件ngnix.conf server listen 80

停用80 端口服务

C:\Users\goodboy>net stop http
下面的服务依赖于 HTTP Service 服务。
停止 HTTP Service 服务也会停止这些服务。World Wide Web 发布服务SSDP DiscoveryPrint Spooler你想继续此操作吗? (Y/N) [N]: y
World Wide Web 发布服务 服务正在停止.
World Wide Web 发布服务 服务已成功停止。
SSDP Discovery 服务正在停止.
SSDP Discovery 服务已成功停止。
Print Spooler 服务正在停止.
Print Spooler 服务已成功停止。
HTTP Service 服务已成功停止。

重启ngnix服务器

2. 一劳永逸,保持ngnix端口不变,修改前端环境信息(推荐)

在前端代码js中,先后找到app.d0aa4eb3.js 和 app.d0aa4eb3.js.map文件

打开: app.d0aa4eb3.js  

查找: localhost

修改:在localhost后添加 现在你的ngnix监听的端口号

例如我的: localhost:8888

打开: app.d0aa4eb3.js.map

查找:process.env.VUE_APP_SOCKET_URL

替换成: ws://localhost:8888/ws/

四、测试

重启服务器

还是报错,考虑浏览器缓存(可以清除浏览器缓存),开一个InPrivate 浏览

成功,测试一下能否及时响应新订单:

http://www.lryc.cn/news/408030.html

相关文章:

  • Qt中在pro中实现一些宏定义
  • bash XXX.sh文件和直接运行XXX.sh的区别
  • 【Python机器学习】k-近邻算法简单实践——改进约会网站的配对效果
  • vue3前端开发-小兔鲜项目-登录组件的开发表单验证
  • Winform上位机TCP客户端/服务端、串口通信
  • Linux基础复习(二)
  • nginx漏洞修复 ngx_http_mp4_module漏洞(CVE-2022-41742)【低可信】 nginx版本升级
  • 网格布局 HTML CSS grid layout demo
  • Java算法之递归算法-如何计算阶乘的值
  • python爬虫入门小案例
  • 【昇腾AI创新大赛集训营南京站学习笔记】-Ascend算子开发课程
  • 系统架构设计师教程 第4章 信息安全技术基础知识-4.5 密钥管理技术4.6 访问控制及数字签名技术-解读
  • C语言日常练习Day13
  • map、foreach、filter这些方法你还不知道什么时候该用哪个吗?那就看过来
  • 6.3 面向对象技术-设计模式
  • Mac 中安装内网穿透工具ngrok
  • python count返回什么
  • mac清理软件哪个好用免费 MacBook电脑清理软件推荐 怎么清理mac
  • 学生党百元蓝牙耳机哪个性价比高?精选四款超强性价比耳机型号
  • 中文之美,美在辞藻富丽,也美在情感含蓄内敛。
  • FPGA与ASIC:深入解析芯片设计的双子星
  • 深入 Symfony 服务容器:依赖注入的艺术
  • 基于Java+SpringMvc+Vue技术的慈善捐赠平台设计与实现(源码+LW+部署讲解)
  • dsp c6657 SYS/BIOS学习笔记
  • 分布式搜索引擎ES-DSL搜索详解
  • vue zip文件下载请求封装与使用
  • Windows波形音频MMEAPI简介
  • sklearn聚类算法用于图片压缩与图片颜色直方图分类
  • Llama 3.1要来啦?!测试性能战胜GPT-4o
  • C++使用opencv处理图像阴影部分