浅谈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进程管理模块forever详解
Jun 01 NodeJs
nodejs下打包模块archiver详解
Dec 03 NodeJs
NodeJs中的VM模块详解
May 06 NodeJs
用NodeJS实现批量查询地理位置的经纬度接口
Aug 16 NodeJs
nodejs连接mysql数据库简单封装示例-mysql模块
Apr 10 NodeJs
详解nodejs模板引擎制作
Jun 14 NodeJs
Nodejs实现文件上传的示例代码
Sep 26 NodeJs
nodejs项目windows下开机自启动的方法
Nov 22 NodeJs
nodejs结合Socket.IO实现的即时通讯功能详解
Jan 12 NodeJs
nodejs更改项目端口号的方法
May 13 NodeJs
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
Nov 01 NodeJs
Nodejs中的require函数的具体使用方法
Apr 02 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脚本的10个技巧(4)
2006/10/09 PHP
php网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
jquery 可排列的表实现代码
2009/11/13 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
理解javascript中的闭包
2017/01/11 Javascript
原生JS轮播图插件
2017/02/09 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
Django中create和save方法的不同
2019/08/13 Python
python装饰器使用实例详解
2019/12/14 Python
python 实现两个npy档案合并
2020/07/01 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
实习评语大全
2014/04/26 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
员工培训协议书
2014/09/15 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
典型事迹材料范文
2014/12/29 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书