pom.xml

             <artifactId>spring-boot-starter-web</artifactId>
         </dependency>
 
-        <dependency>
-            <groupId>mysql</groupId>
-            <artifactId>mysql-connector-java</artifactId>
-            <scope>runtime</scope>
-        </dependency>
-
         <!--<dependency>-->
-            <!--<groupId>com.h2database</groupId>-->
-            <!--<artifactId>h2</artifactId>-->
+            <!--<groupId>mysql</groupId>-->
+            <!--<artifactId>mysql-connector-java</artifactId>-->
             <!--<scope>runtime</scope>-->
         <!--</dependency>-->
         <dependency>
             <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-websocket</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-data-rest</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>com.h2database</groupId>
+            <artifactId>h2</artifactId>
+            <scope>runtime</scope>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-test</artifactId>
             <scope>test</scope>
         </dependency>
             <artifactId>spring-restdocs-mockmvc</artifactId>
             <scope>test</scope>
         </dependency>
+
+        <dependency>
+            <groupId>org.webjars</groupId>
+            <artifactId>webjars-locator-core</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.webjars</groupId>
+            <artifactId>sockjs-client</artifactId>
+            <version>1.0.2</version>
+        </dependency>
+        <dependency>
+            <groupId>org.webjars</groupId>
+            <artifactId>stomp-websocket</artifactId>
+            <version>2.3.3</version>
+        </dependency>
+        <dependency>
+            <groupId>org.webjars</groupId>
+            <artifactId>bootstrap</artifactId>
+            <version>3.3.7</version>
+        </dependency>
+        <dependency>
+            <groupId>org.webjars</groupId>
+            <artifactId>jquery</artifactId>
+            <version>3.1.0</version>
+        </dependency>
     </dependencies>
 
     <build>

src/main/java/com/ziplinegreen/vault/Config/WebSocketConfig.java

+package com.ziplinegreen.vault.Config;
+
+
+import org.springframework.context.annotation.ComponentScan;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.messaging.simp.config.MessageBrokerRegistry;
+import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
+import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
+import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
+
+@Configuration
+@EnableWebSocketMessageBroker
+@ComponentScan(basePackages = "com.ziplinegreen.vault")
+public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
+
+    @Override
+    public void configureMessageBroker(MessageBrokerRegistry config) {
+        config.enableSimpleBroker("/topic");
+        config.setApplicationDestinationPrefixes("/app"); //where the frontend sends things
+    }
+
+    @Override
+    public void registerStompEndpoints(StompEndpointRegistry registry) {
+        registry.addEndpoint("/vault-socket").withSockJS();
+    }
+}

src/main/java/com/ziplinegreen/vault/Controller/PostController.java

 package com.ziplinegreen.vault.Controller;
 
+import com.sun.deploy.net.HttpResponse;
 import com.ziplinegreen.vault.Exception.ResourceNotFoundException;
 import com.ziplinegreen.vault.Model.Post;
+import com.ziplinegreen.vault.Model.User;
 import com.ziplinegreen.vault.Repository.PostRepository;
 import com.ziplinegreen.vault.Repository.UserRepository;
+import com.ziplinegreen.vault.Service.PostService;
+import com.ziplinegreen.vault.Service.UserService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.data.domain.Page;
 import org.springframework.data.domain.Pageable;
+import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
+import org.springframework.messaging.handler.annotation.DestinationVariable;
+import org.springframework.messaging.handler.annotation.MessageMapping;
+import org.springframework.messaging.handler.annotation.SendTo;
+import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.*;
 
 import javax.validation.Valid;
+import java.util.Set;
 
-
+@Controller
 public class PostController {
 
     @Autowired
-    private PostRepository postRepository;
+    private PostService postService;
+    @Autowired
+    private UserController userController;
 
     @Autowired
-    private UserRepository userRepository;
+    private PostRepository repository;
 
-    @GetMapping("/users/{userId}/posts")
-    public Page<Post> getAllPostsByUserId(@PathVariable(value = "userId") Long userId,
-                                             Pageable pageable) {
-        return postRepository.findByUserId(userId, pageable);
+    @Autowired
+    public PostController(PostService postService) {
+        this.postService = postService;
     }
 
-    @PostMapping("/users/{userId}/posts")
-    public Post createPost(@PathVariable (value = "userId") Long userId,
-                                 @Valid @RequestBody Post post) {
-        return userRepository.findById(userId).map(user -> {
-            post.setUser(user);
-            return postRepository.save(post);
-        }).orElseThrow(() -> new ResourceNotFoundException("UserId " + userId + " not found"));
+//    @PostMapping("/posts/{userId}")
+//    public ResponseEntity createPost(@PathVariable Long userId, @RequestBody Post post) {
+//        //userController.updatePosts(userId,post);
+//        return new ResponseEntity(userController.updatePosts(userId, post), HttpStatus.OK);
+//
+//    }
+
+    @MessageMapping("/posts/{userId}")
+    @SendTo("/topic/posts")
+    public Post createPost(@DestinationVariable("userId") Long userId, @RequestBody Post post) {
+    //public Post createPost(@RequestBody Post post) {
+        System.out.println(post.getMessage());
+        post.setUserName(userController.getUserById(userId).getBody().getUsername());
+        //return userController.updatePosts(userId,post);
+        return repository.save(post);
+        //return post;
+        //return new ResponseEntity(userController.updatePosts(userId, post), HttpStatus.OK);
+
     }
 
-    @PutMapping("/users/{userId}/posts/{postId}")
-    public Post updateComment(@PathVariable (value = "userId") Long userId,
-                                 @PathVariable (value = "postId") Long postId,
-                                 @Valid @RequestBody Post postRequest) {
-        if(!userRepository.existsById(userId)) {
-            throw new ResourceNotFoundException("UserId " + userId + " not found");
-        }
-
-        return postRepository.findById(postId).map(post -> {
-            post.setMessage(postRequest.getMessage());
-            return postRepository.save(post);
-        }).orElseThrow(() -> new ResourceNotFoundException("PostId " + postId + "not found"));
+    @GetMapping("/posts/all")
+    public Iterable<Post> getAllPosts() {
+        return repository.findAll();
     }
 
-    @DeleteMapping("/posts/{postId}/comments/{commentId}")
-    public ResponseEntity<?> deleteComment(@PathVariable (value = "userId") Long userId,
-                                           @PathVariable (value = "postId") Long postId) {
-        if(!userRepository.existsById(userId)) {
-            throw new ResourceNotFoundException("UserId " + userId + " not found");
-        }
-
-        return postRepository.findById(postId).map(post -> {
-            postRepository.delete(post);
-            return ResponseEntity.ok().build();
-        }).orElseThrow(() -> new ResourceNotFoundException("PostId " + postId + " not found"));
+
+
+    @GetMapping("/posts/{userId}")
+    //@SendTo("/topic/posts")
+    public ResponseEntity<Iterable<Post>> getAllPostsByUserId(@PathVariable Long userId) {
+        return postService.findByUserId(userId);
     }
+
+//    @PutMapping("/users/{userId/posts")
+//    public ResponseEntity<Post> updatePost(@PathVariable Long userId, @RequestBody Post post){
+//        return postService.updatePost(userId, post);
+//    }
+
+
+
+//    @PutMapping("/users/{userId}/posts/{postId}")
+//    public Post updateComment(@PathVariable (value = "userId") Long userId,
+//                                 @PathVariable (value = "postId") Long postId,
+//                                 @Valid @RequestBody Post postRequest) {
+//        if(!userRepository.existsById(userId)) {
+//            throw new ResourceNotFoundException("UserId " + userId + " not found");
+//        }
+//
+//        return postRepository.findById(postId).map(post -> {
+//            post.setMessage(postRequest.getMessage());
+//            return postRepository.save(post);
+//        }).orElseThrow(() -> new ResourceNotFoundException("PostId " + postId + "not found"));
+//    }
+//
+//    @DeleteMapping("/posts/{postId}/comments/{commentId}")
+//    public ResponseEntity<?> deleteComment(@PathVariable (value = "userId") Long userId,
+//                                           @PathVariable (value = "postId") Long postId) {
+//        if(!userRepository.existsById(userId)) {
+//            throw new ResourceNotFoundException("UserId " + userId + " not found");
+//        }
+//
+//        return postRepository.findById(postId).map(post -> {
+//            postRepository.delete(post);
+//            return ResponseEntity.ok().build();
+//        }).orElseThrow(() -> new ResourceNotFoundException("PostId " + postId + " not found"));
+//    }
 }

src/main/java/com/ziplinegreen/vault/Controller/UserController.java

 package com.ziplinegreen.vault.Controller;
 
 import com.ziplinegreen.vault.Exception.ResourceNotFoundException;
+import com.ziplinegreen.vault.Model.Post;
 import com.ziplinegreen.vault.Model.User;
 import com.ziplinegreen.vault.Repository.UserRepository;
+import com.ziplinegreen.vault.Service.UserService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.data.domain.Page;
 import org.springframework.data.domain.Pageable;
+import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.*;
 
 import javax.validation.Valid;
+import java.util.List;
+import java.util.Set;
 
 @RestController
 public class UserController {
 
-    @Autowired
-    private UserRepository userRepository;
+    private UserService userService;
 
-    @GetMapping("/users")
-    public Page<User> getAllPosts(Pageable pageable) {
-        return userRepository.findAll(pageable);
+    @Autowired
+    public UserController(UserService userService) {
+        this.userService = userService;
     }
 
     @PostMapping("/users")
-    public User createPost(@Valid @RequestBody User user) {
-        return userRepository.save(user);
+    public ResponseEntity<User> createUser(@RequestBody User user) {
+        return userService.createUser(user);
+    }
+
+    @GetMapping("/users/{userId}")
+    public ResponseEntity<User> getUserById(@PathVariable Long userId) {
+        return userService.findUserById(userId);
     }
 
     @PutMapping("/users/{userId}")
-    public User updatePost(@PathVariable Long userId, @Valid @RequestBody User userRequest) {
-        return userRepository.findById(userId).map(user -> {
-            user.setUsername(userRequest.getUsername());
-            return userRepository.save(user);
-        }).orElseThrow(() -> new ResourceNotFoundException("UserId " + userId + " not found"));
+    public ResponseEntity<User> updateUsername(@PathVariable Long userId, @Valid @RequestBody User userRequest) {
+        return new ResponseEntity<>(userService.updateUsername(userId,userRequest), HttpStatus.OK);
     }
 
 
     @DeleteMapping("/users/{userId}")
-    public ResponseEntity<?> deletePost(@PathVariable Long userId) {
-        return userRepository.findById(userId).map(user -> {
-            userRepository.delete(user);
-            return ResponseEntity.ok().build();
-        }).orElseThrow(() -> new ResourceNotFoundException("UserId " + userId + " not found"));
+    public ResponseEntity<?> deleteUser(@PathVariable Long userId) {
+        return userService.deleteUser(userId);
     }
+
+    @PutMapping("/users/{userId}/updatepost")
+    public ResponseEntity<?> updatePosts(@PathVariable Long userId, @RequestBody Post post){
+        return userService.updatePosts(userId, post);
+    }
+
+
 }

src/main/java/com/ziplinegreen/vault/Model/Post.java

 public class Post extends AuditModel{
 
     @Id
-    @GeneratedValue
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
     private Long Id;
 
     @NotNull
     @Lob
     private String message;
-
-    @ManyToOne(fetch = FetchType.LAZY, optional = false)
-    @JoinColumn(name = "user_id", nullable = false)
     @OnDelete(action = OnDeleteAction.CASCADE)
     @JsonIgnore
-    private User user;
+    private Long userId;
+    private String userName;
 
-    public Long getId() {
-        return Id;
+    public Post(){
+    }
+    public Post(@NotNull String message, Long userId, String userName) {
+        this.message = message;
+        this.userId = userId;
+        this.userName = userName;
     }
 
-    public void setId(Long id) {
-        Id = id;
+    public Long getId() {
+        return Id;
     }
 
     public String getMessage() {
         this.message = message;
     }
 
-    public User getUser() {
-        return user;
+    public Long getUserId() {
+        return userId;
     }
 
-    public void setUser(User user) {
-        this.user = user;
+    public String getUserName() { return userName; }
+
+    public void setUserName(String userName) {
+        this.userName = userName;
     }
+
 }

src/main/java/com/ziplinegreen/vault/Model/User.java

 package com.ziplinegreen.vault.Model;
 
+import com.fasterxml.jackson.annotation.JsonIgnore;
+import org.hibernate.annotations.OnDelete;
+import org.hibernate.annotations.OnDeleteAction;
+
 import javax.persistence.*;
 import javax.validation.constraints.NotNull;
+import java.util.ArrayList;
+import java.util.List;
 
 @Entity
 @Table(name = "user")
 public class User extends AuditModel{
     @Id
-    @GeneratedValue
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
     private Long id;
-
-//    @NotNull
-    @Column(name ="USER_USERNAME")
+    @NotNull
     private String username;
+    private String email;
+    private String password;
+    @OneToMany(fetch = FetchType.LAZY,
+            cascade= {
+                CascadeType.PERSIST,
+                CascadeType.MERGE
+            })
+    @JoinTable(name = "user_posts",
+            joinColumns = {@JoinColumn(name = "user_id")})
+    private List<Post> posts = new ArrayList<>();
+
+    public List<Post> getPosts() {
+        if(posts.size()==0){
+            posts = new ArrayList<>();
+            return posts;
+        }
+        return posts;
+    }
+
+    public User(){}
+    public User(@NotNull String username, String email, String password) {
+        this.username = username;
+        this.email = email;
+        this.password = password;
+    }
+
+    public void setPosts(List<Post> posts) {
+        this.posts = posts;
+    }
 
     public Long getId() {
         return id;
     }
 
-    public void setId(Long id) {
-        this.id = id;
+    public String getEmail() {
+        return email;
+    }
+
+    public void setEmail(String email) {
+        this.email = email;
+    }
+
+    public String getPassword() {
+        return password;
+    }
+
+    public void setPassword(String password) {
+        this.password = password;
     }
 
     public String getUsername() {
     public void setUsername(String username) {
         this.username = username;
     }
+
 }

src/main/java/com/ziplinegreen/vault/Repository/PostRepository.java

 import org.springframework.data.domain.Page;
 import org.springframework.data.domain.Pageable;
 import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.query.Param;
+import org.springframework.data.rest.core.annotation.RepositoryRestResource;
 import org.springframework.stereotype.Repository;
 
-@Repository
+@RepositoryRestResource
 public interface PostRepository extends JpaRepository<Post,Long> {
-    Page<Post> findByUserId(Long userId, Pageable pageable);
+    //@Query("select postcontent,timestamp from Post where user_id = :userId")
+    Iterable<Post> findByUserId(Long userId);
 }

src/main/java/com/ziplinegreen/vault/Repository/UserRepository.java

 
 import com.ziplinegreen.vault.Model.User;
 import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.rest.core.annotation.RepositoryRestResource;
 import org.springframework.stereotype.Repository;
 
-@Repository
+@RepositoryRestResource
 public interface UserRepository extends JpaRepository<User,Long> {
 }

src/main/java/com/ziplinegreen/vault/Service/PostService.java

+package com.ziplinegreen.vault.Service;
+
+
+import com.ziplinegreen.vault.Model.Post;
+import com.ziplinegreen.vault.Repository.PostRepository;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.stereotype.Service;
+
+@Service
+public class PostService {
+
+    @Autowired
+    private PostRepository postRepository;
+
+    @Autowired
+    public PostService(PostRepository postRepository) {
+        this.postRepository = postRepository;
+    }
+
+    public ResponseEntity<Post> createPost(Post post){
+        return new ResponseEntity<>(postRepository.save(post), HttpStatus.CREATED);
+    }
+
+    public ResponseEntity<Post> deletePost(Long id){
+        Post post = postRepository.getOne(id);
+        postRepository.delete(post);
+        return new ResponseEntity<>(HttpStatus.OK);
+    }
+
+    public ResponseEntity<Iterable<Post>> findByUserId(Long userId) {
+        return new ResponseEntity<>(postRepository.findByUserId(userId), HttpStatus.OK);
+    }
+
+//    public ResponseEntity<Post> updatePost(Long userId, Post post) {
+//
+//    }
+}
+

src/main/java/com/ziplinegreen/vault/Service/UserService.java

+package com.ziplinegreen.vault.Service;
+
+import com.ziplinegreen.vault.Controller.PostController;
+import com.ziplinegreen.vault.Exception.ResourceNotFoundException;
+import com.ziplinegreen.vault.Model.Post;
+import com.ziplinegreen.vault.Model.User;
+import com.ziplinegreen.vault.Repository.UserRepository;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.stereotype.Service;
+import org.springframework.web.server.ResponseStatusException;
+
+import javax.xml.ws.Response;
+import java.util.List;
+
+@Service
+public class UserService {
+
+    @Autowired
+    private UserRepository userRepository;
+    //private PostController postController;
+
+    @Autowired
+    public UserService(UserRepository userRepository) {
+        this.userRepository = userRepository;
+    }
+
+    public ResponseEntity<User> createUser(User user){
+        return new ResponseEntity<>(userRepository.save(user), HttpStatus.CREATED);
+    }
+
+    public ResponseEntity<User> findUserById(Long id){
+        return new ResponseEntity<>(userRepository.findById(id).get(),HttpStatus.OK);
+    }
+
+    public User updateUsername(Long id, User updatedUser){return userRepository.findById(id).map(user -> {
+        user.setUsername(updatedUser.getUsername());
+        return userRepository.save(user);
+    }).orElseThrow(() -> new ResourceNotFoundException("UserId " + id + " not found"));
+    }
+
+    public ResponseEntity deleteUser(Long id){return userRepository.findById(id).map(user -> {
+        userRepository.delete(user);
+        return new ResponseEntity(HttpStatus.OK);
+    }).orElseThrow(() -> new ResourceNotFoundException("UserId " + id + " not found"));
+
+    }
+
+    public ResponseEntity<User> updatePosts(Long userId, Post post) {
+        User user = findUserById(userId).getBody();
+        List<Post> posts = user.getPosts();
+        posts.add(post);
+        return new ResponseEntity<>(userRepository.save(user), HttpStatus.OK);
+    }
+}
+
+

src/main/resources/application.properties

-## H2
-#spring.h2.console.enabled=true
-#spring.h2.console.path=/h2
-#
-## Datasource
-#spring.datasource.url=jdbc:h2:file:~/test
-#spring.datasource.username=sa
-#spring.datasource.password=
-#spring.datasource.driver-class-name=org.h2.Driver
-
-
-spring.datasource.url=jdbc:mysql://localhost:3306/zipLine?useSSL=false
-spring.datasource.username=root
-spring.datasource.password=Calcifer1650
+# H2
+spring.h2.console.enabled=true
+spring.h2.console.path=/h2
 
-# The SQL dialect makes Hibernate generate better SQL for the chosen database
-spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.MySQL5InnoDBDialect
+# Datasource
+spring.datasource.url=jdbc:h2:file:~/test
+spring.datasource.username=sa
+spring.datasource.password=
+spring.datasource.driver-class-name=org.h2.Driver
 
-# Hibernate ddl auto (create, create-drop, validate, update)
-spring.jpa.hibernate.ddl-auto = update
 
-logging.level.org.hibernate.SQL=DEBUG
-logging.level.org.hibernate.type=TRACE
+#spring.datasource.url=jdbc:mysql://localhost:3306/zipLine?useSSL=false
+#spring.datasource.username=root
+#spring.datasource.password=Calcifer1650
+#
+## The SQL dialect makes Hibernate generate better SQL for the chosen database
+#spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.MySQL5InnoDBDialect
+#
+## Hibernate ddl auto (create, create-drop, validate, update)
+#spring.jpa.hibernate.ddl-auto = update
+#
+#logging.level.org.hibernate.SQL=DEBUG
+#logging.level.org.hibernate.type=TRACE

src/main/resources/static/app.js

+var stompClient = null;
+
+function setConnected(connected) {
+    $('#connect').prop("disabled", connected);
+    $('#disconnect').prop("disabled", !connected);
+    if (connected) {
+        $("#conversation").show();
+    }
+    else {
+        $("#conversation").hide();
+    }
+    $("#messages").html("");
+}
+
+function connect() {
+    var socket = new SockJS('/vault-socket');
+    stompClient = Stomp.over(socket);
+    stompClient.connect({}, function (frame) {
+        setConnected(true);
+        console.log('Connected: ' + frame);
+        stompClient.subscribe('/topic/posts', function (greeting) {
+            showGreeting(JSON.parse(greeting.body).message, JSON.parse(greeting.body).userName);
+        });
+    });
+}
+
+function disconnect() {
+    if (stompClient !== null) {
+        stompClient.disconnect();
+    }
+    setConnected(false);
+    console.log("Disconnected");
+}
+
+var userId = 1;
+var userPostUrl = "/app/posts/1";
+
+function user1() {
+    $('#user1').prop("disabled", true);
+    $('#user2').prop("disabled", false);
+    userId = 1;
+}
+
+function user2() {
+    $('#user1').prop("disabled", false);
+    $('#user2').prop("disabled", true);
+    userId = 2;
+    userPostUrl = "/app/posts/2";
+}
+
+
+function sendName() {
+
+    stompClient.send(userPostUrl, {}, JSON.stringify({'id': '','message': $("#message").val(),'userId': userId}))
+}
+
+function showGreeting(message, userName) {
+    $("#messages").append("<tr><td>" + userName + ": " + message + "</td></tr>");
+}
+
+$(function () {
+    $("form").on('submit', function (e) {
+        e.preventDefault();
+    });
+    $( "#connect" ).click(function() { connect(); });
+    $( "#disconnect" ).click(function() { disconnect(); });
+    $( "#send" ).click(function() { sendName(); });
+    $( "#user1" ).click(function() { user1(); });
+    $( "#user2" ).click(function() { user2(); })
+});

src/main/resources/static/index.html

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Hello WebSocket</title>
+    <link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <!--<link href="/main.css" rel="stylesheet">-->
+    <script src="/webjars/jquery/jquery.min.js"></script>
+    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
+    <script src="/webjars/stomp-websocket/stomp.min.js"></script>
+    <script src="./app.js"></script>
+</head>
+<body>
+<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being
+    enabled. Please enable
+    Javascript and reload this page!</h2></noscript>
+<div id="main-content" class="container">
+    <div class="row">
+        <div class="col-md-6">
+            <form class="form-inline">
+                <div class="form-group">
+                    <label for="connect">WebSocket connection:</label>
+                    <button id="connect" class="btn btn-default" type="submit">Connect</button>
+                    <button id="disconnect" class="btn btn-default" type="submit" disabled="disabled">Disconnect
+                    </button>
+                    <button id="user1" class="btn btn-default" type="submit" disabled="disabled">User 1</button>
+                    <button id="user2" class="btn btn-default" type="submit">User 2</button>
+                </div>
+            </form>
+        </div>
+        <div class="col-md-6">
+            <form class="form-inline">
+                <div class="form-group">
+                    <label for="message">Message?</label>
+                    <input type="text" id="message" class="form-control" placeholder="What is your message...">
+                </div>
+                <button id="send" class="btn btn-default" type="submit">Send</button>
+            </form>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-12">
+            <table id="conversation" class="table table-striped">
+                <thead>
+                <tr>
+                    <th>Messages</th>
+                </tr>
+                </thead>
+                <tbody id="messages">
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+</body>
+</html>