如何使用express和socket.io

Question

我正在使用express V 3.4.8和socket.io V 0.9.16创建一个简单的应用程序，该应用程序使用在人们连接到站点的位置放置标记的方式来渲染地图，所有这些都是为了学习node.js和使用地图。 我的问题是，由于从未交付过，所以我无法使socket.io正常工作，更多ahdead：

这是我的服务器javascript：

var express = require('express');
var http = require('http');
var app = express();
var server = http.createServer(app);
var io = require('socket.io').listen(server);


app.configure(function(){
    app.use('/', express.static(__dirname + '/public'));
    app.use(express.bodyParser());
    app.use(express.methodOverride());
    app.use(app.router);
});

app.configure('development', function(){
  app.use(express.errorHandler());
});


io.sockets.on('connection', function(socket){
    socket.emit('news', {hello: 'world'});
    socket.on('my other event', function(data){
        console.log(data);
    });
});

server.listen(3000, 'localhost');


// console.log('Listening on port %d', server.address().port);

我从控制台获取的日志是：

info: socket.io started
info: unhandled socket.io url

这是我的谷歌浏览器日志：

Uncaught ReferenceError: io is not defined (index):21
Resource interpreted as Script but transferred with MIME type text/plain:"http://localhost:3000/socket.io.js". (index):36
io is not defined

因此，我认为问题是快递设法传递文件的方式，但是据我了解，我不太了解后台发生了什么。 我希望有人可以帮助我理解为什么未交付socket.io.js以及如何解决该问题。 我感谢您的帮助！

**编辑**另外，我在项目中的文件结构类似于：

mapApp
 -node_modules
 -public
   -css
   -img
   -js
   index.html
 app.js (which is the server)

这也是我的客户端js：

$(function(){

    // create a map in the "map" div, set the view to a given place and zoom
    var map = L.map('map',{
        center:[0,0],
        zoom:2,
        minzoom:2,
        maxZoom:18
    });

    // add an OpenStreetMap tile layer
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    /* find user */
    map.locate({setView:true, maxZoom:16});

});

/* client socket*/
/* socket */
var socket = io.connect('http://localhost:3000');
    socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
});

我的index.html：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>mapApp</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="css/leaflet.css">
        <link rel="stylesheet" href="css/basic.css">
        <link rel="stylesheet" href="css/main.css">

        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    </head>
    <body>

        <h1>The map</h1>
        <div id="map"></div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>

        <script src="/socket.io.js"></script>
        <script src="js/vendor/leaflet.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

Answer 1

您必须在服务器端代码中添加路由处理程序：

app.get('/', function(req, res){
   res.sendFile('index.html');
});

index.html将具有您的客户端套接字代码。 它必须导入侧面的socket.io库。

<script src='/socket.io/socket.io.js' />
<script>
    var socket = io.connect('http://127.0.0.1:3000');
    socket.on('news', function (data) {
        console.log(data.msg);
    });
</script>

如何使用express和socket.io

问题描述

1 个解决方案

解决方案1
0 2014-03-18 17:10:47

如何使用express和socket.io

问题描述

1 个解决方案

解决方案1 0 2014-03-18 17:10:47

解决方案1
0 2014-03-18 17:10:47