socket.io消息没有出现

时间:2016-06-01 10:44:18

标签: express socket.io

我正在尝试学习使用Socket.io和Express。没有出现错误消息,但奇怪的是它无法正常工作。 servermessage没有出现,单击发送按钮不会执行任何操作。有什么想法吗?

app.js

var express = require('express');
var http = require('http');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});


var server = http.createServer(app).listen(app.get('port'),
function(){
console.log("Express server listening on port " + app.
get('port'));
});

require('./routes/sockets.js').initialize(server);

module.exports = app;

路由/ sockets.js

var io = require('socket.io');
exports.initialize = function(server) {
io = io.listen(server);
io.sockets.on("connection", function(socket){
socket.send(JSON.stringify(
{type:'serverMessage',
message: 'Welcome to the most interesting chat room on earth!'}));
socket.on('message', function(message){
message= JSON.parse(message);
if(message.type == "userMessage"){
socket.broadcast.send(JSON.stringify(message));
message.type = "myMessage";
socket.send(JSON.stringify(message));
}
});
});
};

公共/ Javascript角/ chat.js

var socket = io.connect('/');
socket.on('message', function (data) {
data = JSON.parse(data);
$('#messages').append('<div class="'+data.type+'">' + data.message +
'</div>');
});
$(function(){
$('#send').click(function(){
var data = {
message: $('#message').val(),
type:'userMessage'
};
socket.send(JSON.stringify(data));
$('#message').val('');
});
});

视图/ index.jade

extends layout

block append head

script(type='text/javascript', src='/socket.io/socket.io.js')
script(type='text/javascript', src='/javascripts/chat.js')


block content
  section#chatroom
    div#messages
    input#message(type='text', placeholder='Enter your message here')
    input#send(type='button', value='Send')

视图/ layout.jade

doctype html
html
  block head
    title= title

    link(rel='stylesheet', href='/stylesheets/style.css')
  body
      header#banner
        h1 Awesome Chat

      block content
      footer Hope you enjoy your stay here

      script(type='text/javascript', src='/javascripts/jquery-1.12.4.min.js')

0 个答案:

没有答案