Socket.IO Node.JS客戶端顯示變量。

我正在創建一個應用程序，這個應用程序在我眼中需要一個在任何給定時間都會在客戶端前顯示的變量。Socket.IO Node.JS客戶端顯示變量。

舉個例子，用戶foo有$ 100美元。發生的事件會從用戶foo的帳戶中扣除20美元。一旦這種扣除發生，我希望客戶的文字更改爲80美元。

我對這需要如何發生有基本的瞭解。

下面是代碼我有，

app.js

var app = require('http').createServer(handler) 
var io = require('socket.io')(app); 
var fs = require('fs'); 

var balance = '100'; 


app.listen(80); 

function handler (req, res) { 
    fs.readFile(__dirname + '/index.html', 
    function (err, data) { 
    if (err) { 
     res.writeHead(500); 
     return res.end('Error loading index.html'); 
    } 

    res.writeHead(200); 
    res.end(data); 
    }); 
} 

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

的index.html

<script src="/socket.io/socket.io.js"></script> 
<script> 
    var socket = io('http://192.168.1.50'); 
    socket.on('news', function (data) { 
    console.log(data); 
    socket.emit('my other event', { my: 'data' }); 
    }); 

    <html><p>Balance: balancehere.</p> </html> 
</script>

我能想象它必須由app.js發射，但我不知道如何將其展示給客戶。你可以在index.html中看到，我有我想要顯示的變量。

來源

2015-11-09 Christopher Allen

您HTML完全搞砸了，這裏是工作的代碼示例，每個客戶端點擊「購買」時，它會發送向節點服務器發出一個信號，這個人會收到它，從他的餘額中折扣20美元，並將更新後的餘額發送給客戶端。

app.js：

var app = require('http').createServer(handler) 
var io = require('socket.io')(app); 
var fs = require('fs'); 

var balance = '100'; 


app.listen(80); 

function handler (req, res) { 
    fs.readFile(__dirname + '/index.html', 
    function (err, data) { 
    if (err) { 
     res.writeHead(500); 
     return res.end('Error loading index.html'); 
    } 

    res.writeHead(200); 
    res.end(data); 
    }); 
} 

io.on('connection', function (socket) { 
    console.log('connected'); 
    socket.on('buy', function (data) { 
    socket.emit('update balance', data-20); // Decrease 20 from the balance 
    }); 

    socket.emit('news', { hello: 'world' }); 
});

的index.html：

<html> 
    <head> 
     <script src="/socket.io/socket.io.js"></script> 
     <script> 
       window.addEventListener("load", function(event) { 
        function updateBalance() { 
         document.getElementById("balance").innerText = balance; 
        } 
        var balance = 100; 
        updateBalance(); 
        var socket = io(location.href.split('/')[2]); // Connect to same URL 

        socket.on('update balance', function (data) { 
         balance = data; 
         updateBalance(); 
        }); 

        document.getElementById("button").onclick = function() { 
         socket.emit('buy', balance); 
        }; 
       }); 
     </script> 
    </head> 
    <body> 
     <p>Balance: $<span id="balance"></span></p><br/> 
     <button id="button">Buy</button> 
    </body> 
</html>

來源

2015-11-09 04:33:40

我認爲插座index.html應該首先發出connection。

試圖改變

var socket = io('http://192.168.1.50');

到

var socket = io('http://192.168.1.50'); 
socket.emit('connection', 'test');

來源

2015-11-09 03:55:56

Socket.IO Node.JS客戶端顯示變量。

回答

相關問題