我在python中创建了一个websocket服务器,我有一个使用该Web服务器的网络聊天,网络聊天框(显示用户发送的消息)的高度为83px,宽度为1176px。
我希望我的用户可以在聊天框中水平显示消息(与聊天框大小规格相对应),而不是传统的列表类型消息显示,所以好像我的用户正在完成彼此的句子。
进一步澄清我的意思:
userA类型:"我的名字是詹姆斯"
userB类型:"当然是"
Chatbox输出:你好我的名字是James当然是
有没有有效的方法来完成这项任务?这是我到目前为止所得到的,被警告,它并不多!
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>
按要求提供更多代码
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);
}
答案 0 :(得分:1)
在您当前的函数log_msg
中:
function log_msg(msg) {
var p = document.createElement("p");
p.innerHTML = msg;
messages.appendChild(p);
}
您正在制作&#39;段落&#39;元素是block-level元素(与inline元素相对)。
您可以在css中为p
元素创建备用样式规则:
#messages p { display: inline }
用于那些段落(您可能需要指定/覆盖其他特定于浏览器的默认样式),
OR(更合乎逻辑地)更改它以创建span-element(内联):
在您的函数log_msg
中:
function log_msg(msg) {
var p = document.createElement("span");
p.innerHTML = msg;
messages.appendChild(p);
}
或简化:
function log_msg(msg) {
messages.appendChild(document.createElement("span")).innerHTML = msg;
} //appendChild returns child, thats why you can set innerHTML directly
请注意,您可能希望将msg
的前导空格和尾随空格(尤其是缺少空格)考虑在内!例如:
msg.trim()+' ' // or for older browsers: msg.replace(/^\s+|\s+$/g, '')+' '
希望这有帮助!