socket.ioでクライアントhtmlからjavascriptを読み込む方法

前提・実現したいこと

socket.ioとthree.jsをつかってwebアプリの開発をしています。
そこでクライアント側のhtmlでthree.jsライブラリやjavascriptのファイルを読み込みたいです。

発生している問題・エラーメッセージ

サーバーを起動してからhtmlを開くとこのようなエラーが発生します。
おそらく理由はjavascriptファイルの読み込み方が違うからだと思われます。

“http://localhost:8080/libs/three.js” からのスクリプトが読み込まれました。しかし、この MIME タイプ (“text/html”) は正しい JavaScript の MIME タイプではありません。
SyntaxError: expected expression, got '<'

該当のソースコード

server.js
1var fs=require("fs");
2var server = require("http").createServer(handler);
3var config=require("./config");
4var express = require("express");
5var app = express();
6
7function handler(req,res){
8    res.writeHead((200),{"Content-Type":"text/html"});
9    var output = fs.readFileSync("./sample02.html", "utf-8");
10    res.end(output);
11}
12server.listen(config.port);
13var io = require("socket.io").listen(server);
14
15var userHash={};
16
17// イベントの定義
18// 通信イベント
19io.sockets.on("connection",function(socket){
20    
21    // 接続開始イベント
22    socket.on("open",function(name){
23        var i=0;
24        var msg=name + i + "が接続しました";
25        i++;
26        userHash[socket.id]=name;  // nameを配列に保存している
27        console.log(msg);
28        io.sockets.emit("sendMsg",{value:msg});
29    });
30
31    // メッセージ送信カスタムイベント
32    socket.on("sendMsg",function(data){
33        io.sockets.emit("sendMsg",{value:data.value});
34    });
35
36    // 接続終了イベント
37    socket.on("close",function(){
38        if(userHash[socket.id] != null){
39            var msg = userHash[socket.id] + "が退出しました";
40            delete userHash[socket.id];
41            io.sockets.emit("close",{value:msg});
42            console.log(msg);
43        }
44    });
45    
46
47});

sample02.html
1<html>
2
3<head>
4    <meta charset="UTF-8">
5    <title>サーバーテスト</title>
6    <script type="text/javascript" src="/libs/three.js"></script>
7</head>
8<body>
9
10<!-- Div which will hold the Output -->
11<div id="WebGL-output">
12</div>
13
14<!-- Javascript code that runs our Three.js examples -->
15<script src="/socket.io/socket.io.js"></script>
16<script type="text/javascript">
17var scene;
18
19var socketio = io.connect(); // サーバーとのコネクションを作成
20
21function setScene(){
22     scene = new THREE.Scene();
23}
24    
25function init() {
26
27    setScene();
28
29    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
30
31    var renderer = new THREE.WebGLRenderer();
32    renderer.setClearColor(new THREE.Color(0xEEEEEE));
33    renderer.setSize(window.innerWidth, window.innerHeight);
34
35    var axes = new THREE.AxisHelper(20);
36    scene.add(axes);
37
38    var planeGeometry = new THREE.PlaneGeometry(60, 20);
39    var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
40    var plane = new THREE.Mesh(planeGeometry, planeMaterial);
41
42    plane.rotation.x = -0.5 * Math.PI;
43    plane.position.x = 15;
44    plane.position.y = 0;
45    plane.position.z = 0;
46
47    scene.add(plane);
48
49    var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
50    var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});
51    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
52
53    cube.position.x = -4;
54    cube.position.y = 3;
55    cube.position.z = 0;
56
57    scene.add(cube);
58
59    var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
60    var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});
61    var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
62
63    sphere.position.x = 20;
64    sphere.position.y = 4;
65    sphere.position.z = 2;
66
67    scene.add(sphere);
68
69    camera.position.x = -30;
70    camera.position.y = 40;
71    camera.position.z = 30;
72    camera.lookAt(scene.position);
73
74    document.getElementById("WebGL-output").appendChild(renderer.domElement);
75
76    renderer.render(scene, camera);
77}
78window.onload = init;
79
80
81</script>
82</body>
83</html>
84

行動規範の内容に同意します

回答1件

server.js
1// expressを読み込む
2var express = require("express");
3var app = express();
4
5// サーバーを構築
6var http = require("http").Server(app);
7
8// socket.ioを読み込み、サーバーと紐づけ
9var io = require("socket.io")(http);
10
11// expressで外部ファイルが扱えるようにパスを設定
12app.use(express.static("public"));
13
14// socket.ioの設定を角
15// socket.ioが接続された場合に実行
16io.on("connection",function(socket){
17    console.log("connected");
18})
19
20// サーバーの設定
21const PORT = process.env.PORT || 8080;
22http.listen(PORT,function(){
23    console.log("server running");
24});