node.jsでチャットアプリを作りたいと思い、pcではちゃんとメッセージのhtmlが生成されるのですが、iPhoneだとindex.htmlにある <button onclick="publishMessage();">語る</button>の部分しか表示されません。app.jsでapp.use(express.static('/')); と指定しているのですがスマホだとjsの内容が表示されません。以下にソースコードを掲載します。どなたか原因分かる方教えてください...
app.js
//モジュールオブジェクトの初期化 var express = require('express'); var app = express(); var fs = require('fs'); var http = require('http').Server(app); var io = require('socket.io')(http); var port = process.env.PORT || 3000; app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); }); app.use(express.static('/')); // ユーザ管理ハッシュ var userHash = {}; // 2.イベントの定義 io.on("connection", function (socket) { // 接続開始カスタムイベント(接続元ユーザを保存し、他ユーザへ通知) socket.on("connected", function (name) { var msg = name + "が入室しました"; userHash[socket.id] = name; io.emit("publish", {value: msg}); }); // メッセージ送信カスタムイベント socket.on("publish", function (data) { io.emit("publish", {value:data.value}); }); // 接続終了組み込みイベント(接続元ユーザを削除し、他ユーザへ通知) socket.on("disconnect", function () { if (userHash[socket.id]) { var msg = userHash[socket.id] + "が退出しました"; delete userHash[socket.id]; io.emit("publish", {value: msg}); } }); }); http.listen(port, function(){ console.log('listening on *:' + port); });
index.html
<html> <head> <meta charset="UTF-8"> <title>チャット</title> </head> <body> <input type="text" id="msg_input" style="width:200px;" /> <button onclick="publishMessage();">語る</button> <div id="msg"></div> <script src="/socket.io/socket.io.js"></script> <script type="text/javascript"> // 1.イベントとコールバックの定義 var socketio = io.connect('http://localhost:3000'); socketio.on("connected", function(name) {}); socketio.on("publish", function (data) { addMessage(data.value); }); socketio.on("disconnect", function () {}); // 2.イベントに絡ませる関数の定義 function start(name) { socketio.emit("connected", name); } function publishMessage() { var textInput = document.getElementById('msg_input'); var msg = "[" + myName + "] " + textInput.value; socketio.emit("publish", {value: msg}); textInput.value = ''; } function addMessage (msg) { var domMeg = document.createElement('div'); domMeg.innerHTML = new Date().toLocaleTimeString() + ' ' + msg; msgArea.appendChild(domMeg); } // 3.開始処理 var msgArea = document.getElementById("msg"); var myName = Math.floor(Math.random()*100) + "さん"; addMessage("貴方は" + myName + "として入室しました"); start(myName); </script> </body> </html>
回答1件
あなたの回答
tips
プレビュー