Nodejs 및 webSockets, 이벤트 트리거?

Question

나는 이것에 초보적이며 표준 웹 채팅 응용 프로그램을 만들었고 nodejs, express, socket.io의 힘을 본다.

내가하려는 것은 리모콘과 같이 전화에서 웹 사이트로 이벤트를 트리거하는 것입니다. 클라이언트에서 이벤트를 수신하는 서버 자바 스크립트가 있으며 이러한 이벤트를 트리거하는 클라이언트 자바 스크립트가 있습니다. 이것이 틀렸다면 올바른 방법입니다.

채팅 응용 프로그램에서 특정 포트 http://my-server-ip:3000/을 통해 내 서버에 연결되어있는 한 어디서나 개체를 보낼 수 있다는 것을 알게되었습니다. 기본적으로 모든 이벤트는 인덱스 페이지 안에 있으며 연결은 index에서 server에서 index까지입니다.

내가 배우려고하는 것은 외부 페이지에서 이벤트를 트리거하는 방법입니다. http://my-server-ip:3000/ws 또는 그와 비슷한 것을 보았습니다. 아이디어는 실제 색인 또는 웹 사이트가 아닌 모바일 인터페이스에 연결하는 것입니다. 이 인터페이스는 노드 서버와 통신하여 디스패처로 사용하여 기본 색인 페이지에서 이벤트를 트리거합니다.

기본적으로 내가 배운 것은 index ~ server ~ index입니다. 나는 custom-page을 server에서 index로 어떻게 갈 수 있는지 잘 모르겠습니다.

내 app.js에서 알기로는 소켓이 클라이언트에있는 sends을 수신한다는 것을 알았습니다. 메시지를 내 보냅니다.

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

여기에 버튼이있는 test.html을 만들려고 시도했는데, 여기 들어 보았습니다. 여기 스크린 샷이 있습니다.

여기에 내가 그 모든 잘못 확신 내 클라이언트 코드

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); 
    }); 
}); 

.

Answer 1

정말 멋져서 작동하기 때문에 논리가 정확합니다. 제가 놓친 몇 가지 것들이있었습니다. 여기있어.

내가 포트를 듣고 후 주요 로직을 자바 스크립트 코드 모든 서버 측을 게시하려고하지만, 여기에 있지 않다 등

다음

// 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); 
     } 
    }); 

}