浅谈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 相关文章推荐
跟我学Nodejs(一)--- Node.js简介及安装开发环境
May 20 NodeJs
Nodejs的express使用教程
Nov 23 NodeJs
NodeJs——入门必看攻略
Jun 27 NodeJs
windows 下安装nodejs 环境变量设置
Feb 02 NodeJs
NodeJs的fs读写删除移动监听
Apr 28 NodeJs
Nodejs--post的公式详解
Apr 29 NodeJs
nodejs实现连接mongodb数据库的方法示例
Mar 15 NodeJs
nodejs实现超简单生成二维码的方法
Mar 17 NodeJs
nodejs之koa2请求示例(GET,POST)
Aug 07 NodeJs
Nodejs中的require函数的具体使用方法
Apr 02 NodeJs
Nodejs监听日志文件的变化的过程解析
Aug 04 NodeJs
详解NodeJS模块化
Jun 15 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 date函数参数详解
2006/11/27 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
简单三步,搞掂内存泄漏
2007/03/10 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
详解python开发环境搭建
2016/12/16 Python
python并发编程之线程实例解析
2017/12/27 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
python基于http下载视频或音频
2018/06/20 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
彪马美国官网:PUMA美国
2017/03/09 全球购物
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
教师师德反思材料
2014/02/15 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
离婚协议书的范本
2015/01/27 职场文书
指导老师鉴定意见
2015/06/05 职场文书
幼儿园开学报名通知
2015/07/16 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS
MySQL中order by的使用详情
2021/11/17 MySQL