个人中心
gpt4 book ai didi

javascript - 无法加载资源 - Socket.IO

转载 作者：太空宇宙 更新时间：2023-11-04 03:10:13 25 4
gpt4 key购买 nike

我一直在尝试使用node.js 和socket.io，并遵循教程。我不断从我正在构建的应用程序中收到错误。这是我的 server.js 文件:

var http = require('http');
var fs = require('fs');
var path = require('path');
var mime = require('mime');
var cache = {};
var chatServer = require('./lib/chat_server.js');
chatServer.listen(server);

//file doesn't exist
function send404(response) {
    response.writeHead(404, {'Content-Type': 'text/plain'});
    response.write('Error 404: resource not found.');
    response.end();
}

//handles serving file data
function sendFile(response, filePath, fileContents) {
    response.writeHead(
    200,
    {"content-type": mime.lookup(path.basename(filePath))}
    );
    response.end(fileContents);
}

//cache static files to memory
function serveStatic(response, cache, absPath) {
    if (cache[absPath]) {
        sendFile(response, absPath, cache[absPath]);
    } else {
        fs.exists(absPath, function(exists) {
            if (exists) {
            fs.readFile(absPath, function(err, data) {
                if (err) {
                    send404(response);
                } 
                else {
                    cache[absPath] = data;
                    sendFile(response, absPath, data);
                }
            });
           } 
           else {
            send404(response);
           }
        });
    }
}

var server = http.createServer(function(request, response) {
    var filePath = false;
    if (request.url == '/') {
        filePath = 'public/index.html';
        } 
    else {
        filePath = 'public' + request.url;  
    }
    var absPath = './' + filePath;
    serveStatic(response, cache, absPath);
});

server.listen(3001, function() {
    console.log("Server listening on port 3001.");
});

这是我的index.html 文件:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Chat</title>
    <meta name="description" content="An interactive chat application using websockets.">
    <link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
    <div id='content'>
        <div id='room'></div>
        <div id='room-list'></div>
        <div id='messages'></div>
        <form id='send-form'>
            <input id='send-message' />
            <input id='send-button' type='submit' value='Send'/>
            <div id='help'>
                Chat commands:
                <ul>
                    <li>Change nickname: <code>/nick [username]</code></li>
                    <li>Join/create room: <code>/join [room name]</code></li>
                </ul>
            </div>
        </form>
    </div>
    <script src="[localserver here]:3001/socket.io/socket.io.js" type="text/javascript"></script>
    <script src="/javascripts/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="/javascripts/chat.js" type="text/javascript"></script>
    <script src="/javascripts/chat_ui.js" type="text/javascript"></script>
</body>
</html>

从浏览器加载“[localserver here]:3001”后，索引页面将显示并带有随后的 CSS。但是当我尝试一个事件(例如发送消息)时，我收到此错误:

错误 404:找不到资源。

我右键单击并检查了 Chrome 浏览器中的元素，并收到了两条消息:

无法加载资源:服务器响应状态为 404(未找到)“[本地服务器]:3001/socket.io/socket.io.js”

Uncaught ReferenceError :io未定义“[本地服务器]:3001/javascripts/chat_ui.js:26”

这是我的 chat_ui.js 文件中的第 26 行:

var socket = io.connect('[localserver here]:3001');
$(document).ready(function() {

   var chatApp = new Chat(socket);
   socket.on('nameResult', function(result) {
       var message;
       if (result.success) {
           message = 'You are now known as ' + result.name + '.';
       } else {
           message = result.message;
       }
       $('#messages').append(divSystemContentElement(message));
   });

   socket.on('joinResult', function(result) {
       $('#room').text(result.room);
       $('#messages').append(divSystemContentElement('Room changed.'));
   });

   socket.on('message', function (message) {
       var newElement = $('<div></div>').text(message.text);
       $('#messages').append(newElement);
   });

   socket.on('rooms', function(rooms) {
       $('#room-list').empty();
       for(var room in rooms) {
           room = room.substring(1, room.length);
           if (room != '') {
               $('#room-list').append(divEscapedContentElement(room));
           }
       }
       $('#room-list div').click(function() {
           chatApp.processCommand('/join ' + $(this).text());
           $('#send-message').focus();
       });
   });

   setInterval(function() {
       socket.emit('rooms');
   }, 1000);
   $('#send-message').focus();
   $('#send-form').submit(function() {
       processUserInput(chatApp, socket);
       return false;
   });
})

各种方法我都试过了。最初第 26 行是 var socket = io.connect();我把它改成了上面的那个。我还更改了index.html文件中socket.io.js的目录:

至

...因为我认为这是问题所在，但它仍然给我同样的错误。

请问我该如何解决这个问题？

(PS - 我使用 Brackets 作为 Node.js 开发的 IDE。此外，我使用“[localserver]”来指示 localhost)

最佳答案

试试这个:

<script type="text/javascript" src='http://localhost:3001/socket.io/socket.io.js'>
</script>

<script type="text/javascript">

var socket = io.connect('http://localhost:3001');

socket.on('connect',function(){
console.log("connect");
});
</script>

它一定对你有帮助。

关于javascript - 无法加载资源 - Socket.IO，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24059255/

25 4 0
文章推荐： html - anchor 标签高度值不会改变
文章推荐： c - RTE 插件与 Frama-c : "-rte-unsigned-ov" is not recognized
文章推荐： image - 我有一个带有蓝线、透明背景的 PNG，没有别的。 CSS中有没有办法让线条变白？
文章推荐： html - 具有线性渐变和图像的背景图像不起作用(使用 Wordpress)
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com