Initial commit

892f2f8e · Vadym Gidulian · b126de70 · 892f2f8e · 892f2f8e · 892f2f8e
Commit 892f2f8e authored Mar 10, 2016 by Vadym Gidulian
Hide whitespace changes
Inline Side-by-side

Showing with 203 additions and 0 deletions

chatroom.js chatroom.js +44 -0

database.sql database.sql +27 -0

index.html index.html +40 -0

messages.php messages.php +47 -0

style.less style.less +45 -0

No files found.
--- a/chatroom.js
+++ b/chatroom.js
+angular.module('chatroom', [])
+    .controller('ChatRoomController', ['$scope', '$http', '$interval', function ($scope, $http, $interval) {
+        $scope.newMessage = {};
+        $scope.messages = [];
+        $scope.maxMessageId = 0;
+        $scope.checkNewMessages = function () {
+            $http.get('messages.php?id')
+                .success(function (id) {
+                    if (id > $scope.maxMessageId) {
+                        $scope.loadMessages();
+                    }
+                });
+        };
+        $scope.loadMessages = function () {
+            $http.get('messages.php')
+                .success(function (messages) {
+                    $scope.messages = messages;
+                    $scope.maxMessageId = Math.max.apply(Math, $scope.messages.map(function(m){return m.id}));
+                });
+            $_body = $('body');
+            $_body.stop().animate({
+                scrollTop: $_body[0].scrollHeight
+            }, 400);
+        };
+        $scope.sendMessage = function () {
+            $http.post('messages.php', $scope.newMessage)
+                .success(function () {
+                    $scope.newMessage = {};
+                });
+        };
+        // Init
+        $scope.loadMessages();
+        $interval(function () {
+            $scope.checkNewMessages();
+        }, 1000);
+    }]);
\ No newline at end of file
--- a/database.sql
+++ b/database.sql
+-- Drop table
+DROP TABLE IF EXISTS Messages;
+-- Create table
+CREATE TABLE IF NOT EXISTS Messages (
+	id       INT      PRIMARY KEY AUTO_INCREMENT,
+	date     DATETIME NOT NULL    DEFAULT CURRENT_TIMESTAMP,
+	username TINYTEXT NOT NULL,
+	message  TEXT     NOT NULL
+);
+-- Get last 50 messages
+SELECT
+	id, date, username, message
+FROM
+	Messages
+LIMIT 50;
+-- Get id of the last message
+SELECT
+	MAX(id) AS max_id
+FROM
+	Messages;
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Chatroom</title>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
+    <script src="chatroom.js"></script>
+    <link rel="stylesheet/less" href="style.less">
+    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
+</head>
+<body ng-app="chatroom" ng-controller="ChatRoomController as chatroom">
+<div id="chat">
+    <div ng-repeat="message in messages">
+        <div>
+            <span class="time" ng-bind="message.date"></span>
+            <span class="name" ng-bind="message.name"></span>
+        </div>
+        <p ng-bind="message.message"></p>
+    </div>
+</div>
+<div id="controls">
+    <form action="javascript: void(0)" ng-submit="sendMessage()">
+        <div>
+            <input type="text" ng-model="newMessage.name" placeholder="Type your name here">
+        </div>
+        <div>
+            <input type="text" ng-model="newMessage.message" placeholder="Type your message here">
+            <button>Send</button>
+        </div>
+    </form>
+</div>
+<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
+</body>
+</html>
--- a/messages.php
+++ b/messages.php
+<?php
+$con = mysqli_connect('localhost', 'root', '', 'chatroom');
+if (mysqli_connect_errno()) {
+    die;
+}
+switch ($_SERVER['REQUEST_METHOD']) {
+    case 'GET':
+        if (isset($_GET['id'])) {
+            $result = mysqli_query($con, "SELECT MAX(id) AS max_id FROM Messages");
+            echo mysqli_fetch_array($result)['max_id'];
+            die;
+        }
+        $limit = isset($_GET['last']) ? $_GET['last'] : 50;
+        $result = mysqli_query($con, "SELECT id, date, username, message FROM Messages LIMIT $limit");
+        $messages = [];
+        while($row = mysqli_fetch_array($result)) {
+            $message['id']      = $row['id'];
+            $message['date']    = $row['date'];
+            $message['name']    = $row['username'];
+            $message['message'] = $row['message'];
+            $messages[] = $message;
+        }
+        print_r(json_encode($messages));
+        break;
+    case 'POST':
+        $message = json_decode(file_get_contents("php://input"));
+        $name = $message->name;
+        $mess = $message->message;
+        $st = mysqli_prepare($con, "INSERT INTO Messages (username, message) VALUES (?, ?)");
+        $st->bind_param("ss", $name, $mess);
+        $result = $st->execute();
+        break;
+}
+mysqli_close($con);
--- a/style.less
+++ b/style.less
+html, body {
+    margin: 0;
+    padding: 0;
+}
+body {
+    padding-bottom: 65px;
+    box-sizing: border-box;
+}
+#chat {
+    > div {
+        position: relative;
+        margin: 10px;
+        min-height: 40px;
+        > div {
+            position: absolute;
+            width: 150px;
+            span {
+                display: block;
+            }
+        }
+        > p {
+            padding-left: 160px;
+            margin: 0;
+        }
+    }
+}
+#controls {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 7px;
+    width: 100%;
+    background: #fff;
+    input {
+        margin: 2px;
+    }
+}