浅谈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中启用ECMAScript 6小结(windos以及Linux)
Jul 15 NodeJs
ubuntu下安装nodejs以及升级的办法
May 08 NodeJs
使用DNode实现php和nodejs之间通信的简单实例
Jul 06 NodeJs
nodejs入门教程六:express模块用法示例
Apr 24 NodeJs
nodejs之get/post请求的几种方式小结
Jul 26 NodeJs
浅谈nodejs中的类定义和继承的套路
Jul 26 NodeJs
nodejs结合socket.io实现websocket通信功能的方法
Jan 12 NodeJs
NodeJs 文件系统操作模块fs使用方法详解
Nov 26 NodeJs
nodejs 使用nodejs-websocket模块实现点对点实时通讯
Nov 28 NodeJs
nodejs基础之常用工具模块util用法分析
Dec 26 NodeJs
nodejs中request库使用HTTPS代理的方法
Apr 30 NodeJs
nodejs一个简单的文件服务器的创建方法
Sep 13 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学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
解析在PHP中使用全局变量的几种方法
2013/06/24 PHP
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
PHP实现的日历功能示例
2018/09/01 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
jquery实现拖动效果
2016/08/10 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
python+django加载静态网页模板解析
2017/12/12 Python
Flask框架配置与调试操作示例
2018/07/23 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
Python关于反射的实例代码分享
2020/02/20 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
Linux中如何用命令创建目录
2016/12/02 面试题
法律工作求职自荐信
2013/10/31 职场文书
吨的认识教学反思
2014/04/27 职场文书
新闻发布会策划方案
2014/06/12 职场文书
班级心理活动总结
2014/07/04 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
技术股份合作协议书
2014/10/05 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
python实战之90行代码写个猜数字游戏
2021/04/22 Python
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python
用Python实现屏幕截图详解
2022/01/22 Python