Question

我尝试使用节点js，express和三个js。

我有以下文件：

index.js：

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

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

app.get('/js/client_world.js', function(req, res){
    res.sendFile(__dirname + '/js/client_world.js');
});

io.on('connection', function(socket){
    console.log("A user is connected");

    socket.on('disconnect', function(){
        console.log("User disconnected");
    });
}); 

http.listen(8080, function(){
    console.log("Listenng to port 8080")
});

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
<script src="/socket.io/socket.io.js"></script>
<script src="//threejs.org/build/three.min.js"></script>
    <script src="/js/client_world.js"></script>
</head>
<body>
    <div id="container"></div>
<script>    
        var socket = io();

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

</body>
</html>

和js / client_world.js：

var container, scene, camera, renderer, cube;   

var loadWorld = function(){

    //Setup------------------------------------------
    container = document.getElementById('container');

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);


    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);

        camera.position.y = -400;
        camera.position.z = 400;
        camera.rotation.x = .70;

        scene = new THREE.Scene();

        cube = new THREE.Mesh(new THREE.CubeGeometry(100,100,100), new THREE.MeshNormalMaterial());

        cube.rotation.z = .75

        scene.add(cube);

        renderer.render(scene, camera);

        //Final touches-----------------------------------
    container.appendChild( renderer.domElement );
    document.body.appendChild( container );

};

它像这样工作。如何在不使用套接字的情况下调用loadWorld（）函数？我想将此部分集成到端口8080无法用于套接字的程序中。

感谢支持。

我试图解释我想做什么：我有一个包含2个链接的网站。第一个页面指向显示数据库数据的页面。您可以在此处输入数据并将其保存到数据库。第二个链接应打开一个带有图形表示的页面。该站点使用三个js。现在，我正在寻找一种使用express和pug在节点js中显示三个js图形的方法。上面的示例仅显示具有三个js的显示。但是我不能将它用这样的数据库构建到项目中。

const express = require('express');
const seiten = require('./seiten.json');
const morgan = require('morgan');
const bodyParser = require('body-parser');
const movieRouter = require('./movie');
const model = require('./movie/model');
var http = require('http').Server(express);
var io = require('socket.io')(http);

const app = express();

......
......


......
const server = app.listen(8080, () => {
console.log(`Express running → PORT ${server.address().port}`);
});

http.listen(8080, function(){
console.log("Listenng to port 8080")
});

这会给我错误：地址已经在使用8080。我的问题：如何在不使用套接字的情况下调用loadWorld（）函数？

与此同时，我尝试了以下操作：

我叫profile.pug

doctype html
html(lang="en")
head
    meta(charset="UTF-8")
    title Graphische Darstellung
body

    block content

    div.container
    script(src='/three.min.js')
    script(src='/client_world.js')

mit：

....
....
app.get('/profile', (req, res) => {

model.getAll().then(
movies => {
  res.render('profile', {movies} );
},
error => res.send(error),
);

});

......
......

但仅显示空白页面。

Answer 1

它适用于：

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

server.listen(8080, function(){
console.log("Listenng to port 8080")
});

应用程序和socket.io服务器都在同一端口上运行。

如何在节点js

1 个答案: