2017-05-07 115 views
0

這裏是app.js文件Socket.io默不匹配錯誤

import express from 'express'; 
import bodyParser from 'body-parser'; 
import mongoose from 'mongoose'; 
import http from 'http'; 
import event from 'events'; 
import io from 'socket.io'; 
import session from 'express-session'; 
import passport from 'passport'; 
import LocalStrategy from 'passport-local'; 
import multer from 'multer'; 
import fs from 'fs'; 
import passportLocalMongoose from 'passport-local-mongoose'; 
import postRoutes from './server/routes/posts.routes'; 
import commentRoutes from './server/routes/comments.routes'; 
import authRoutes from './server/routes/auth.routes'; 
import userRoutes from './server/routes/users.routes'; 
import {passportConfig} from './server/config/passport.config'; 
import {socketFunction} from './server/config/socket.io.config'; 
import path from 'path'; 

mongoose.connect('mongodb://localhost/blog'); 

const sanitizer = require('sanitize-html'); 
const app = express(); 

const server = http.Server(app); 
const socket = io(server); 
const localEvent = event.EventEmitter; 
const myEvent = new localEvent(); 

app.use(function(req, res, next) { 
    res.header("Access-Control-Allow-Origin", "*"); 
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With,Access-Control-Allow-Origin, Content-Type, Accept, Authorization"); 
    res.header("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE, OPTIONS"); 

    next(); 
}); 


app.use(bodyParser.urlencoded({extended: true})); 
app.use(bodyParser.json()); 
app.use(session({ 
    secret: "some secret", 
    resave: false, 
    saveUninitialized: false 
})) 

passportConfig(app); 

app.use(postRoutes); 
app.use(commentRoutes); 
app.use(authRoutes); 
app.use(userRoutes); 
app.use(express.static(path.join(__dirname, '/client'))) 
app.use(express.static(path.join(__dirname, 'node_modules'))) 
app.use(express.static(path.join(__dirname, 'uploads'))) 


const port = 6655; 

['/admin/', '/admin/:var', '/admin/edit/:var'].forEach(function(url){ 
    app.get(url, (req, res)=>{ 
    res.sendFile(path.join(__dirname, '/client', '/dashboard', '/index.html')); 
    }) 
}) 

const blogRoutes = ['/', '/articles', '/articles/:url', '/contact']; 

blogRoutes.forEach(el=>{ 
    app.get(el, (req, res)=>{ 
    if(el === '/articles/:url'){ 
     socketFunction(socket, req.params.url, myEvent) 
    } 
    res.sendFile(path.join(__dirname, '/client', '/blog', '/blog.html')); 
    }) 
}) 

app.listen(process.env.PORT, process.env.IP,()=>{ 
    console.log(`Express server listening on port ${process.env.PORT} and IP ${process.env.IP}`); 
}); 

這裏是我的socket.io.config文件

function socketFunction(io, url, event){ 
    const blog = io.of(`/articles/${url}`) 
    const admin = io.of('/admin/home') 
    blog.on('connection', (fromBlog)=>{ 
     console.log("Connection made on blog"); 
     fromBlog.on('comment', (msg)=>{ 
      event.emit('comment-posted', { 
       msg: msg.message 
      }) 
     }) 
    }) 
    admin.on('connection', (toAdmin)=>{ 
     console.log("Connection made on admin");   
     event.on('comment-posted', (msg)=>{ 
      toAdmin.emit('blog-comment', { 
       msg: msg.message 
      }) 
     }) 
    }) 
} 

export {socketFunction} 

,這裏是我的兩個HTML文件

<!DOCTYPE html> 
<html ng-app="blog"> 
    <head> 
    <meta charset="utf-8"> 
    <base href="/blog" target="_blank"> 
    <title>Ayush Bahuguna | Web Developer</title> 
    <link rel="stylesheet" href="/blog/dist/css/styles.css"> 
    </head> 
    <body> 
    <script src='/socket.io/socket.io.js' type="text/javascript" charset="utf-8"></script> 
    <script src="/blog/dist/js/vendor.js" charset="utf-8"></script> 
    <script src="/blog/dist/js/app.js" charset="utf-8"></script> 
    </body> 
</html> 

<!DOCTYPE html> 
<html ng-app="cms"> 
    <head> 
    <meta charset="utf-8"> 
    <base href="/admin"> 
    <title>Blog Admin | Ayush Bahuguna</title> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
     rel="stylesheet"> 
    </head> 
    <body> 
    <root></root> 
    <script src="/socket.io/socket.io.js"></script> 
    <script src="/dashboard/dist/plugins/tinymce/tinymce.min.js" charset="utf-8"></script> 
    <script src="/dashboard/dist/js/vendor.js"></script> 
    <script src="/angular-ui-tinymce/dist/tinymce.min.js" charset="utf-8"></script> 
    <script src="/dashboard/dist/js/app.js"></script> 
    </body> 
</html> 

我收貨The resource from 「http://localhost:6655/socket.io/socket.io.js」 was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff)

我檢查了網絡選項卡,並且socket.io.js文件的類型設置爲text/html。我不知道爲什麼會發生這個問題,我沒有任何捕捉所有路線。

我試圖找到出路,通過使用socket.io的client文件夾中的socket.io.js,但事實證明,socket.io是不是找那個文件,並明確地尋找/socket.io/socket.io.js

非常感激你的幫助。

+0

@lix我已經在html文件中。 –

回答

2

問題是這樣的:

const server = http.Server(app); 
const socket = io(server); 
... 
app.listen(...); 

您應該呼籲server聽...

server.listen(...); 

...還是讓快速創建一個HTTP服務器,你(這是什麼app.listen()這也是它不工作的原因:當它創建一個新的服務器時,該服務器不附帶socket.io):

const server = app.listen(...); 
const socket = io(server); 

您得到的text/html響應可能是由於404響應。