浅谈vue websocket nodeJS 进行实时通信踩到的坑


Posted in NodeJs onSeptember 22, 2020

先说明,我并不知道出现坑的原因是什么。我只是按照别人的写法就连上了。

我的处境是这样的

我的前台是用了 vue 全家桶,启动了一个 9527 端口。

而我的后台是用 nodeJS,启动了 8081 端口。

很明显,这种情况就出现了头疼的跨域。

贴出我的代码,如下

server.js(后台)

var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
io.sockets.on('connection', (socket) => {
 console.log('123')
});

main.js(前台)

import VueSocketio from 'vue-socket.io'
import socketio from 'socket.io-client'
Vue.use(VueSocketio, socketio('http://localhost:8081'), store)

然后根据网上的写法,我在后端对跨域进行了处理

app.all('*',function (req, res, next) {
 res.header('Access-Control-Allow-Origin', 'http://localhost:9527');
 res.header('Access-Control-Allow-Headers', 'X-Token, Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
 res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
 if (req.method == 'OPTIONS') {
 res.send(200); /*让options请求快速返回*/
 }
 else {
 next();
 }
});

满心欢喜的重启前台看下有没有脸上。

结果出现了一下错误

浅谈vue websocket nodeJS 进行实时通信踩到的坑

Failed to load http://localhost:8081/socket.io/?EIO=3&transport=polling&t=MAqqfjf: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. Origin 'http://localhost:9527' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

这个错误。。我看得出是是 “Access-Control-Allow-Credentials” 的问题。所以我又改了后台的跨域代码

app.all('*',function (req, res, next) {
 res.header('Access-Control-Allow-Origin', 'http://localhost:9527');
 res.header('Access-Control-Allow-Headers', 'X-Token, Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
 res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
 res.header('Access-Control-Allow-Credentials','true'); // 新增
 if (req.method == 'OPTIONS') {
 res.send(200); /*让options请求快速返回*/
 }
 else {
 next();
 }
});

更改过后,我又满心欢喜的跑去前台,一看

结果就一直报错:

浅谈vue websocket nodeJS 进行实时通信踩到的坑

GET http://localhost:8081/socket.io/?EIO=3&transport=polling&t=MAqp7zN 404 (Not Found)

GET http://localhost:8081/socket.io/?EIO=3&transport=polling&t=MAqp7zN 404 (Not Found)

报错了这个是 404 。

百度了很久, 各种关键字都搞不了。最后去 google 了。结果让我找到了答案:

浅谈vue websocket nodeJS 进行实时通信踩到的坑

看了上面这个答案,我翻查了一下,正好我也是用 express4 的。所以我就按照他的说法去改。结果如下。

正确的写法

后端

var server = app.listen(8081); 
var io = require('socket.io').listen(server);
io.sockets.on('connection', (socket) => {
 console.log('123')
});

前端的写法不变。

思考点

虽然我不知道背后发生了什么事(因为是赶项目,赶鸭子上架写 node 和 vue 的,本人是 Java 开发),但是我还是觉得有几个点要注意的:

1、关于 Express 4 和 其他版本中,socketio 的写法不同,少了一个 http 模块。所以我认为是出现这种情况的主要原因

2、注意跨域的写法。四行代码,最好能够保存下来。

3、如果是本地测试的,需要注意 IP 问题。如果是 localhost 的,请前后端一直;如果是 127.0.0.1,请前后端一致。

以上这篇浅谈vue websocket nodeJS 进行实时通信踩到的坑就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
抛弃Nginx使用nodejs做反向代理服务器
Jul 17 NodeJs
使用Nodejs开发微信公众号后台服务实例
Sep 03 NodeJs
Nodejs express框架一个工程中同时使用ejs模版和jade模版
Dec 28 NodeJs
nodejs 的 session 简单使用
Jun 06 NodeJs
NodeJS配置HTTPS服务实例分享
Feb 19 NodeJs
基于Nodejs利用socket.io实现多人聊天室
Feb 22 NodeJs
nodejs使用express创建一个简单web应用
Mar 31 NodeJs
nodejs个人博客开发第二步 入口文件
Apr 12 NodeJs
NodeJs的fs读写删除移动监听
Apr 28 NodeJs
NodeJS实现自定义流的方法
Aug 01 NodeJs
Nodejs核心模块之net和http的使用详解
Apr 02 NodeJs
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
Apr 29 NodeJs
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
Aug 20 #NodeJs
浅谈使用nodejs搭建web服务器的过程
Jul 20 #NodeJs
通过实例了解Nodejs模块系统及require机制
Jul 16 #NodeJs
Nodejs环境实现socket通信过程解析
Jul 03 #NodeJs
使用nodejs实现JSON文件自动转Excel的工具(推荐)
Jun 24 #NodeJs
nodejs各种姿势断点调试的方法
Jun 18 #NodeJs
在NodeJs中使用node-schedule增加定时器任务的方法
Jun 08 #NodeJs
You might like
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
使用jquery.validate自定义方法实现"手机号码或者固话至少填写一个"的逻辑验证
2014/09/01 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
简单的python后台管理程序
2017/04/13 Python
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
python抖音表白程序源代码
2019/04/07 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
python爬虫添加请求头代码实例
2019/12/28 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
卫校毕业生自我鉴定
2013/10/31 职场文书
电子技术专业中专生的自我评价
2013/12/17 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
高中生操行评语
2014/04/25 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
保险内勤岗位职责
2015/04/13 职场文书
项目备案申请报告
2015/05/15 职场文书
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android