使用Node.js和WebSocket进行聊天

因为那时候对于Jade作为屏幕源感兴趣，所以现在有一个简单的聊天。

图像

doctype html
html(lang="ja")
  head
  body
    h1 easy chat
    input(type="text",id="message")
    button(type="button",id="submit") submit
    ul(id="messageList")

JavaScript服务器

var WebSocketServer = require('ws').Server;
var http = require('http');
var express = require('express');
var app = express();
var port = process.env.PORT || 5000;

//////////////////////
// setting http
app.use(express.static('public'));
app.set("views", "src");

app.get('/', function(req, res) {
  res.render('jade/chat.jade');
});

var server = http.createServer(app);
server.listen(port);
console.log("Node app is running at localhost:" + port);

///////////////////
// setting ws

var wss = new WebSocketServer({server:server});
console.log("websocket server created");

var connections = [];

// 接続開始
wss.on('connection', function(ws) {
  console.log('websocket connection open');

  connections.push(ws);
  /**
   * ws受信時
   * メッセージを受けたら、時間とuserIdを付与して、接続している全員にsend
   */
  ws.on('message', function(json) {
    console.log('message is ' + json);
    var data = JSON.parse(json);
    data.time = new Date();
    data.userId = connections.indexOf(ws) + 1;
    wss.clients.forEach(function(client) {
      client.send(JSON.stringify(data));
    });
  });

  // クローズ
  ws.on('close', function() {
    console.log('websocket connection close');
  });
});

前端js

var host = location.origin.replace(/^http/, 'ws')
var ws = new WebSocket(host);
// ws受信
ws.onmessage = function(event) {
  var data = JSON.parse(event.data);
  switch (data.type) {
    // メッセージ
    case 'message':
      // 表示文字列作成
      var line = ""; 
      line += data.time;
      line += " ID:" + data.userId;
      line += " " + data.message;
      // リスト表示
      $('#messageList').append('<li>' + line + '</li>');
      break;
    default:
      break;
  }
};
// submitボタン押下
$('#submit').on('click', function() {
  var message = $('#message').val();
  if (message.length > 50) {
    return;
  }
  ws.send(JSON.stringify({
    type: 'message',
    message: message
  }));
});

以下是源代码：
https://github.com/yamatatsu/node-chat