html 监听后端变化_关于websocket的代码，实现发送信息和监听信息（前端 后端（node.js））...

文件结构

node.js代码

// 需要HTTP 模块来启动服务器和Socket.IO

var http= require('http');

var fs = require('fs');

// 在8080端口启动服务器

var server= http.createServer(function(req, res){

// 发送HTML的headers和message

fs.readFile('../index.html',function(error,data){

res.writeHead(200,{'Content-Type':'text/html'});

res.end(data,'utf-8');

});

});

server.listen(8080,function () {

console.log('监听端口是 8080 ,服务已启动');

});

// 创建一个Socket.IO实例，把它传递给服务器

var socket = require('socket.io').listen(server);

// 添加一个连接监听器

socket.on('connection', function(client){

// 成功！现在开始监听接收到的消息

console.log("connected");

client.on('message',function(data){

console.log('Received message from client!',data);

client.broadcast.emit('server message',{text:data.text});

});

client.on('disconnect',function(){

//clearInterval(interval);

console.log('Server has disconnected');

});

//模拟触发数据

// var interval= setInterval(function() {

// //client.send('This is a message from the server! ' + new Date().getTime());

// //发送给单个用户

// //client.emit('message',{text:'你上线了'});

// //发送给所有用户

// client.broadcast.emit('message',{text:'你的好某XXX上线了'});

// },5000);

});

index.html页面代码：

Socket.IO Example

var socket = io.connect('ws://localhost:8080');

//前端监听信息

socket.on('server message',function(data){

console.log(data.text);

})

//前端发送信息

document.getElementById("sendBtn").onclick = function () {

var info = document.getElementById("msgbox").value;

//console.log(info);

socket.emit("message",{text:info});

}