CODEWITHSUNDEEP
javascripthtml
user3649195
user3649195

Reputation: 115

Formatting chat messages sent by user in Javascript

I've created a websocket server in python and I have a web chat which uses that web server, the web chat box(which displays the messages sent by the user) has the height of 83px and width of 1176px.

I'd like for my users messages to be displayed horizontally along the chat box(as accordingly with the chat box size specifications) instead of the conventional list type display of messages, so it seems as if my users are completing each other's sentences.

Further clarifying what I mean:

userA types: "Hi my name is James"

userB types: "Of course it is"

Chatbox output: Hi my name is James Of course it is

Is there any effective method of achieving this task? Here's what I have so far, be warned, it's not much!

s = new WebSocket(host);

                    s.onopen = function (e) { log_msg("connected..."); };
                    s.onclose = function (e) { log_msg("connection closed."); };
                    s.onerror = function (e) { log_msg("connection error."); };
                    s.onmessage = function (e) { log_msg("message: " + e.data); };
                } catch (ex) {

HTML

<fieldset id="messages" class = "focus-actions""> </fieldset>

More Code as requested

var messages;
            var form;
            var inputBox;

            function log_msg(msg) {
                var p = document.createElement("p");
                p.innerHTML = msg;
                messages.appendChild(p);
            }

            function doInit() {
                inputBox = document.getElementById("message");
                messages = document.getElementById("messages");
                form = document.getElementById("message-form");
                var s;
                try {
                    var host = "ws://localhost:4545/";
                    if(window.location.hostname) {
                        host = "ws://" + window.location.hostname + ":4545/";
                    }

                    s = new WebSocket(host);

                    s.onopen = function (e) { log_msg("connected..."); };
                    s.onclose = function (e) { log_msg("connection closed."); };
                    s.onerror = function (e) { log_msg("connection error."); };
                    s.onmessage = function (e) { log_msg("message: " + e.data); };
                } catch (ex) {
                    log_msg("connection exception:" + ex);
                }

                form.addEventListener("submit", function (e) {
                    e.preventDefault();
                    s.send(inputBox.value);
                    inputBox.value = "";
                }, false);
            }

Upvotes: 0

Views: 474

Answers (1)

GitaarLAB
GitaarLAB

Reputation: 14645

In your current function log_msg:

function log_msg(msg) {
    var p = document.createElement("p");
    p.innerHTML = msg;
    messages.appendChild(p);
}

you are creating 'paragraph' elements which are block-level elements (as opposed to inline elements).

You'd either create alternate styling rules for p elements in css:

#messages p    { display: inline }

for those paragraphs (you might need to specify/override other browser-specific default styles to),

OR (more logically) you change it to create a span-element (which is inline):

In your function log_msg:

function log_msg(msg) {
    var p = document.createElement("span");
    p.innerHTML = msg;
    messages.appendChild(p);
}

or simplified:

function log_msg(msg) {
    messages.appendChild(document.createElement("span")).innerHTML = msg;
}  //appendChild returns child, thats why you can set innerHTML directly

Note that you might want to take leading and trailing whitespace (especially the lack of) into account for your msg! Example:

msg.trim()+' '   // or for older browsers: msg.replace(/^\s+|\s+$/g, '')+' '

Hope this helps!

Upvotes: 1

Related Questions