Angular UI for Simple Go Chat

Mar 13, 2016 · 2 minute read · Comments

After reading Allan’s article http://www.amaxwellblair.com/posts/simple_chat_app_using_go, I just wanted to put a simple UI on that so that iI could test using it as multiple users. So I created a simple AngularJS app that uses Allan’s very efficient long polling chat application.

The code can be used/forked or whatever from github - https://github.com/p4tin/simplegochat. If you want to try it, clone the repo and start chit-chat.go with the command go run chit-chat.go. After that you can simply navigate to http://localhost:9000/ to be presented with the web front end. Enter your name and start chatting.

Test Server

You can try the chat at: http://simplechat.gocodecloud.com/

Here is the code for the simple go chat AngularUI

The Code

<html>
<head>
    <title>Chat App</title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
    <script src="app.js"></script>
</head>


<body ng-app="GoChatApp" ng-controller="MainController as main" ng-load="">
<div class="container">
    <div class = "page-header">

        <h1>
            Chit-Chat<br>
            <small>Go Chat</small>
        </h1>

    </div>

    <div class="message-history">
        <div class="form-group">
            <div id="chat" ng-model="chatLines" style="height: 60%;overflow:auto;"></div>
        </div>

        <form role="form" ng-submit="sendMsg()">
            <div class="row">
                <div class="col-xs-12">
                    <div class="input-group">
                        <input ng-model="typedInput" type="text" class="form-control" />
                        <div class="input-group-btn">
                            <button type="submit" class="btn">Send</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>

var app = angular.module("GoChatApp", []);
app.controller("MainController", function($scope, $http) {

    $scope.username = ""
    $scope.chatLines = []
    $scope.typedInput = ""


    $scope.getNewData = function()
    {
        $http.get("/chat").then(function (response) {
            $scope.chatLines.splice(0, 0, response.data + "<br>");
            if($scope.chatLines.length > 200)
                $scope.chatLines.splice($scope.chatLines.length-1, 1);
            $( "#chat" ).html($scope.chatLines);
            $scope.getNewData()
        });
    }

    $scope.sendMsg = function() {
        var data = $.param({
            body: $scope.username + ": " + $scope.typedInput
        });
        $http({
            method: 'POST',
            url: '/chat',
            data: data,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }}).then(function(result) {
            console.log(result);
        }, function(error) {
            console.log(error);
        });
        $scope.typedInput = ""
    };

    $( "#chat" ).html($scope.chatLines);

    while ($scope.username == "") {
        $scope.username = prompt("Please enter your name", "");
    }
    $scope.username = "<b>" + $scope.username + "</b>"
    $scope.getNewData()
});

*** Sign up for my email list to keep in touch with all the interesting new happenings in the go community with the GolangNewsFeed

Paul Fortin

Angular UI for Simple Go Chat

Test Server

The Code