vue websocket nodeJSがリアルタイムで通信するために踏んだピットについて話します。

先に説明してください。ピットができた理由は分かりません。私はただ人の書き方に従って、続けました。
私の立場はこうです。
私のフロントは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();
 }
});

喜びに満ちた再起動フロントがありますか？顔を見てください。
その結果、エラーが発生しました。

Failed to loadhttp://localhost:8081/socket.io/?EIO=3&transport=polling&t=MAqqfjf: The value of the'Access-Coontrol-Chredentials'header in the reponse is'which must'true'when the request's credntials mode is'include'.Origin'http://localhost:9527'is therefore not allowed access.The credentials mode of requests initiated by theXMLHttpRequest is controlled by the withCredentials atribute.
これは間違いです。「Access-Coontrol-Alllow-Chredentials」の問題だと思います。だから私はまたバックグランドのクロスドメインコードを変えました。

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();
 }
});

変更後、私はまた喜んでフロントに行きました。見てみます。
結果はずっとエラーです。

GEThttp://localhost:8081/socket.io/?EIO=3&transport=polling&t=MAqp7zN 404（Not Found）
GEThttp://localhost:8081/socket.io/?EIO=3&transport=polling&t=MAqp7zN 404（Not Found）
これは404です。
Baiduは長い間、様々なキーワードができませんでした。最後にgoogleに行きました。結果は答えを見つけました。

この答えを見て、調べてみたら、ちょうど私もexpress 4を使っています。だから彼の言い方によって変えます。結果は以下のとおりです。
正しい書き方
バックエンド

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

先の書き方は変わりません。
思考点
背後で何が起こっているかは分かりませんが（急いでいるので、アヒルの子の棚にノドとvueを書いています。本人はJava開発です。）、いくつか注意したいと思います。
1、Express 4と他のバージョンについては、socketioの書き方が違っていて、httpモジュールが一つ足りません。だから、このような状況が発生した主な原因だと思います。
2、クロスドメインの書き方に注意する。四行のコードを保存したほうがいいです。
3、ローカルテストの場合、IP問題に注意する必要があります。local hostの場合は前後にずっと持ってください。127.1.0.1なら、前後一致してください。
以上のこの浅談Vue websocket nodeJSがリアルタイム通信で踏んだ穴は小編集がみんなに共有した内容です。参考にしていただければと思います。どうぞよろしくお願いします。