var socket;
var chatlog = {
  name: "Name",
  message: "Sample message"
}
function setup() {
  createCanvas(400, 400);
  select("#send").mouseClicked(sendMessage);
  socket = io.connect(window.location.origin);
  socket.on('gotMessage', gotMessage);
}

function gotMessage(chatdata) {
  console.log(chatdata);
  chatlog.name = chatdata.name;
  chatlog.message = chatdata.message;
}

function draw() {
  background(220);
  text("名前:" + chatlog.name, width / 2, height / 2);
  text("メッセージ:" + chatlog.message, width / 2, height / 2 + 12);
}

function sendMessage() {
  var text_name = document.getElementById("name").value;
  var text_message = document.getElementById("message").value;
  var chatdata = {
    name: text_name,
    message: text_message
  }
  socket.emit('sendMessage', chatdata);
  console.log(chatdata);
  chatlog.name = chatdata.name;
  chatlog.message = chatdata.message;
}