我是新手,我构建了一个标准的网络聊天应用程序,我看到了nodejs,express,socket.io的强大功能。
我要做的是触发从手机到网站的事件,比如遥控器。有服务器javascript监听来自客户端的事件,以及触发这些事件的客户端javascript,如果我错了,这就是我理解的纠正方法。
我在聊天应用程序中了解到,我可以从任何地方发送对象,只要它们通过特定端口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);
});
});
上面发布的所有代码只是测试cookie切割器代码,我从头开始学习,所以上面的内容可以完全改变,它只是作为一个起点。
答案 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);
}
});
}