Nodejs和webSockets,触发事件?

时间:2014-01-17 03:02:46

标签: javascript node.js sockets

我是新手,我构建了一个标准的网络聊天应用程序,我看到了nodejs,express,socket.io的强大功能。

我要做的是触发从手机到网站的事件,比如遥控器。有服务器javascript监听来自客户端的事件,以及触发这些事件的客户端javascript,如果我错了,这就是我理解的纠正方法。

我在聊天应用程序中了解到,我可以从任何地方发送对象,只要它们通过特定端口http://my-server-ip:3000/连接到我的服务器。基本上所有事件都在索引页面内,连接是indexserverindex

我想学习的是如何从外部页面触发事件,我已经看到像http://my-server-ip:3000/ws之类的东西,或类似的东西,想法是连接到不是实际的移动界面索引或网站本身,但此接口与节点服务器通信,使用它作为调度程序来触发主索引页面上的事件。

基本上我学到的是indexserverindex。我不确定如何custom-page转到serverindex

我在app.js中看到,我的理解是套接字侦听客户端上的sends,然后它会发出消息。

io.sockets.on('connection', function (socket) {
    socket.on('sends', function (data) {
        io.sockets.emit('message', data);
    });
});

我尝试创建一个有一个按钮的test.html,我试着听它,这是一个屏幕截图。

enter image description here

这是我的客户代码

window.onload = function() {

    var messages = [];
    var socket = io.connect('http://my-server-ip:3000/');
    var socketTwo = io.connect('http://my-server-ip:3000/test.html');
    var field = document.getElementById("field");
    var sendButton = document.getElementById("send");
    var content = document.getElementById("content");
    var name = document.getElementById("name");

    var trigBtn = document.getElementById("trigger-btn");

    socket.on('message', function (data) {
        if(data.message) {
            messages.push(data);
            var html = '';
            for(var i=0; i<messages.length; i++) {
                html += '<b>' + (messages[i].username ? messages[i].username : 'Server') + ': </b>';
                html += messages[i].message + '<br />';
            }
            content.innerHTML = html;
        } else {
            console.log("There is a problem:", data);
        }
    });

        //FROM DEMO
    // sendButton.onclick = sendMessage = function() {
    //     if(name.value == "") {
    //         alert("Please type your name!");
    //     } else {
    //         var text = field.value;
    //         socket.emit('send', { message: text, username: name.value });
    //         field.value = "";
    //     }
    // };

        //I include this javascript with test.html and trigger 
        //this button trying to emit a message to socketTwo
    trigBtn.onclick = sendMessage = function() {
        socketTwo.emit('send', { message: 'String test here' })
    }

}

我确信这一切都是错的,但希望这是有道理的,有人可以帮助我从触发索引的另一个页面触发事件。

这是我的app.js服务器代码

/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes')
  , http = require('http');

var app = express();
var server = app.listen(3000);
var io = require('socket.io').listen(server); // this tells socket.io to use our express server

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.static(__dirname + '/public'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
});

app.configure('development', function(){
  app.use(express.errorHandler());
});

app.get('/', routes.index);

app.get('/test.html', function(req, res) {
    res.send('Hello from route handler');
});

io.sockets.on('connection', function (socket) {
    socket.emit('message', { message: 'welcome to the chat' });
    socket.on('send', function (data) {
        io.sockets.emit('message', data);
    });
});

上面发布的所有代码只是测试cookie切割器代码,我从头开始学习,所以上面的内容可以完全改变,它只是作为一个起点。

1 个答案:

答案 0 :(得分:4)

这很酷,我让它工作,所以我的逻辑是正确的。我失踪了一些东西。在这里。

我不会发布所有服务器端的javascript代码,但这是听完端口等后的主要逻辑。

// Set a route and in a very dirty fashion I included a script specific
// for this route, earlier I was using one script for both route.
// I also forgot to include the socket.io hence the error in the image above.
app.get('/test', function(req, res) {
    res.send('<script src="/socket.io/socket.io.js"></script><script type="text/javascript" src="javascripts/trigger.js"></script><button id="test" class="trigger-btn">Trigger</button>');
});

// This listens to `send` which is defined in the `test` route
// Upon this action the server emits the message which
// is defined inside the index main route I want stuff displayed   
io.sockets.on('connection', function (socket) {
    socket.on('send', function (data) {
        io.sockets.emit('message', data);
    });
});

这是索引客户端,js脚本的样子

window.onload = function() {

    var messages = [];
    var socket = io.connect('http://my-server-ip:3000');
    var content = document.getElementById("content");

    socket.on('message', function (data) {
        if(data.message) {
            messages.push(data);
            var html = '';
            for(var i=0; i<messages.length; i++) {
                html += '<b>' + (messages[i].username ? messages[i].username : 'Server') + ': </b>';
                html += messages[i].message + '<br />';
            }
            content.innerHTML = html;
        } else {
            console.log("There is a problem:", data);
        }
    });

}