rye761 · May 13, 2018 23:48
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>Fireside Chat</title>
  <link rel="stylesheet" href="/style/style.css">
 </head>
 <body>
  <h1>Fireside Chat</h1>
  <div id="app">
    <div v-if="state == 0">
      <h3>Welcome! Please choose a username</h3>
      <form @submit.prevent="setUsername">
        <input type="text" placeholder="Username..." v-model:value="username" />
        <input type="submit" value="Join" />
      </form>
      <button @click="continueWithoutUsername">Join as a Guest</button>
    </div>
    <div v-if="state == 1">
      <ul id="chatbox">
        <li v-for="message in messages">
          <b>{{ message.user }}:</b> {{ message.message }}
        </li>
      </ul>
      <form @submit.prevent="sendMessage">
        <input type="text" placeholder="Message..." v-model:value="message" />
        <input type="submit" value="Send" />
      </form>
    </div>
  </div>
  <script src="/socket.io/socket.io.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var socket = null;
    var app = new Vue({
      // State 0: select username
      // State 1: chat application
      el: '#app',
      data: {
        messages: [],
        message: '',
        username: '',
        state: 0
      },
      methods: {
        sendMessage: function () {
          socket.emit('message', this.message);
          this.message = '';
        },
        setUsername: function () {
          socket.emit('join', this.username);
          this.username = '';
          this.state = 1;
        },
        continueWithoutUsername: function () {
          socket.emit('join', null);
          this.state = 1;
        }
      },
      created: function () {
        socket = io();
      },
      mounted: function () {
        socket.on('message', function (message) {
          app.messages.push(message);
          // this needs to be done AFTER vue updates the page!!
          app.$nextTick(function () {
            var messageBox = document.getElementById('chatbox');
            messageBox.scrollTop = messageBox.scrollHeight;
          });
        });
      }
    });
  </script>
 </body>
 </html>
diff --git a/index.js b/index.js
 const express = require('express')
 const app = express()
 const http = require('http').Server(app)
 const io = require('socket.io')(http)

 app.use('/style', express.static(__dirname + '/style'))
 app.get('/', (req, res) => res.sendFile(__dirname + '/index.html'))

 io.on('connection', (socket) => {
  socket.username = 'anonymous';
  socket.on('change username', (name) => socket.username = name)
  socket.on('message', (msg) => io.emit('message',
  { 'user': socket.username, 'message': msg }))
  socket.on('join', (username) => {
    if (username != null) {
      socket.username = username
    }
    socket.broadcast.emit('message',
    { 'user': 'Server', 'message': socket.username + ' has joined!'})
  })
 })

 http.listen(3000, () => console.log('listening on port 3000'))
diff --git a/package.json b/package.json
 {
  "name": "chat",
  "version": "1.0.0",
  "description": "chat",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.3",
    "socket.io": "^2.1.0"
  }
 }
diff --git a/style.css b/style.css
 body {
  font-family: sans-serif;
  background: url('http://www.cornwallnewswatch.com/wp-content/uploads/2014/07/Fire-01.jpg');
  color: white;
 }

 #chatbox {
  height: 200px;
  max-width: 400px;
  overflow-y: scroll;
 }
	<!DOCTYPE html>
	<html>
	<head>
	<title>Fireside Chat</title>
	<link rel="stylesheet" href="/style/style.css">
	</head>
	<body>
	<h1>Fireside Chat</h1>
	<div id="app">
	<div v-if="state == 0">
	<h3>Welcome! Please choose a username</h3>
	<form @submit.prevent="setUsername">
	<input type="text" placeholder="Username..." v-model:value="username" />
	<input type="submit" value="Join" />
	</form>
	<button @click="continueWithoutUsername">Join as a Guest</button>
	</div>
	<div v-if="state == 1">
	<ul id="chatbox">
	<li v-for="message in messages">
	<b>{{ message.user }}:</b> {{ message.message }}
	</li>
	</ul>
	<form @submit.prevent="sendMessage">
	<input type="text" placeholder="Message..." v-model:value="message" />
	<input type="submit" value="Send" />
	</form>
	</div>
	</div>
	<script src="/socket.io/socket.io.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
	var socket = null;
	var app = new Vue({
	// State 0: select username
	// State 1: chat application
	el: '#app',
	data: {
	messages: [],
	message: '',
	username: '',
	state: 0
	},
	methods: {
	sendMessage: function () {
	socket.emit('message', this.message);
	this.message = '';
	},
	setUsername: function () {
	socket.emit('join', this.username);
	this.username = '';
	this.state = 1;
	},
	continueWithoutUsername: function () {
	socket.emit('join', null);
	this.state = 1;
	}
	},
	created: function () {
	socket = io();
	},
	mounted: function () {
	socket.on('message', function (message) {
	app.messages.push(message);
	// this needs to be done AFTER vue updates the page!!
	app.$nextTick(function () {
	var messageBox = document.getElementById('chatbox');
	messageBox.scrollTop = messageBox.scrollHeight;
	});
	});
	}
	});
	</script>
	</body>
	</html>
	const express = require('express')
	const app = express()
	const http = require('http').Server(app)
	const io = require('socket.io')(http)

	app.use('/style', express.static(__dirname + '/style'))
	app.get('/', (req, res) => res.sendFile(__dirname + '/index.html'))

	io.on('connection', (socket) => {
	socket.username = 'anonymous';
	socket.on('change username', (name) => socket.username = name)
	socket.on('message', (msg) => io.emit('message',
	{ 'user': socket.username, 'message': msg }))
	socket.on('join', (username) => {
	if (username != null) {
	socket.username = username
	}
	socket.broadcast.emit('message',
	{ 'user': 'Server', 'message': socket.username + ' has joined!'})
	})
	})

	http.listen(3000, () => console.log('listening on port 3000'))
	{
	"name": "chat",
	"version": "1.0.0",
	"description": "chat",
	"main": "index.js",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"author": "",
	"license": "ISC",
	"dependencies": {
	"express": "^4.16.3",
	"socket.io": "^2.1.0"
	}
	}
	body {
	font-family: sans-serif;
	background: url('http://www.cornwallnewswatch.com/wp-content/uploads/2014/07/Fire-01.jpg');
	color: white;
	}

	#chatbox {
	height: 200px;
	max-width: 400px;
	overflow-y: scroll;
	}