即時通訊WEB網頁仿qq

阿新 • • 發佈：2018-11-30

這裡寫圖片描述

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Web即時通訊</title>
<style>
    .chat-container{width:800px;height 
:600px;margin:auto;margin-top:30px;box-shadow: 2px 2px 50px #ccc, -2px -2px 50px #ccc;z-index:99999;}
    .friend-area{width:250px;height:600px;float:left;overflow: auto;background:rgb(207,207,207)}
    .chat-window{height:600px;width:550px;margin-left:250px;}
    .msg-list-area{height:370px;overflow: auto;padding:5 
px;padding-bottom:40px;}
    .msg-add-area{position:relative;height:104px;}
    button#btnSend{position: absolute;right:10px;bottom:10px;}
    textarea#chat{width:100%;height:100%;padding:5px;}
    .friend-item{padding:10px 15px;height:60px;margin-bottom:1px;}
    .friend-item-avatar{width:60px;height:60px;border-radius 
:50%;float:left;}
    .friend-item-name{margin-left:8px;display:inline-block;vertical-align:middle;height:100%;padding-top:20px;}
    .msg-item{margin-top:15px;}
    .msg-item-friend-avatar{width:40px;height:40px;border-radius:50%;}
    .avatar-user .msg-item-friend-avatar{float:left;}
    .avatar-me .msg-item-friend-avatar{float:right;}
    .avatar-user .msg-item-right{margin-left:48px;}
    .avatar-me .msg-item-right{margin-right:48px;}
    .msg-item-right-name{font-size: 14px;color:#333;}
    .msg-item-send-time{font-size:13px;}
    .avatar-me .msg-item-send-time{text-align: right;}
    .msg-item-right-content{font-size:13px;background:rgb(209,209,209);padding:8px 15px;border-radius:5px;display:inline-block;}
    .avatar-user .msg-item-right-content{margin-right:100px;}
    .avatar-me .msg-item-right-content{margin-left:100px;}
    .avatar-me .msg-item-right-name{text-align: right;}
    .avatar-me .msg-item-right-content{text-aligin:right;background:rgb(82,172,101);color:white;text-align: right;display:inline-block;float:right;}
</style>
</head>
<body>
    <div class="chat-container">
        <div class="friend-area">
            <div class="friend-item" style="background:#eee;">
                <img class="friend-item-avatar" src="http://k2.jsqq.net/uploads/allimg/1706/7_170629152344_5.jpg"/>
                <span class="friend-item-name">張三</span>
                <div style="clear:both;"></div>
            </div>
            <div class="friend-item">
                <img class="friend-item-avatar" src="http://k2.jsqq.net/uploads/allimg/1706/7_170629152344_5.jpg"/>
                <span class="friend-item-name">張三</span>
                <div style="clear:both;"></div>
            </div>
            <div class="friend-item">
                <img class="friend-item-avatar" src="http://k2.jsqq.net/uploads/allimg/1706/7_170629152344_5.jpg"/>
                <span class="friend-item-name">張三</span>
                <div style="clear:both;"></div>
            </div>
            <div class="friend-item">
                <img class="friend-item-avatar" src="http://k2.jsqq.net/uploads/allimg/1706/7_170629152344_5.jpg"/>
                <span class="friend-item-name">張三</span>
                <div style="clear:both;"></div>
            </div>
            <div class="friend-item">
                <img class="friend-item-avatar" src="http://k2.jsqq.net/uploads/allimg/1706/7_170629152344_5.jpg"/>
                <span class="friend-item-name">張三</span>
                <div style="clear:both;"></div>
            </div>
        </div>
        <div class="chat-window">
            <div class="friend-info" style="background:rgb(231,231,231);">
                <div class="friend-item">
                    <img class="friend-item-avatar" src="http://k2.jsqq.net/uploads/allimg/1706/7_170629152344_5.jpg"/>
                    <span class="friend-item-name">李五</span>
                    <div style="clear:both;"></div>
                </div>
            </div>
            <div id="msgList" class="msg-list-area">
<!--                <div class="msg-item avatar-user">
                    <img class="msg-item-friend-avatar" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2182925329,386985427&fm=27&gp=0.jpg">
                    <div class="msg-item-right"> 
                        <div class="msg-item-right-name">李五</div>
                        <div class="msg-item-send-time">2017-10-17 09:08:11</div>
                        <div class="msg-item-right-content" >在嗎？lionel</div>
                        <div style="clear:both;"></div>
                    </div>
                </div> -->
                <!-- <div class="msg-item avatar-me">
                    <img class="msg-item-friend-avatar" src="http://img5.imgtn.bdimg.com/it/u=1822899106,40471411&fm=27&gp=0.jpg">
                    <div class="msg-item-right"> 
                        <div class="msg-item-right-name">lionel</div>
                        <div class="msg-item-send-time">2017-10-17 09:08:11</div>
                        <div class="msg-item-right-content">你大撒發撒發fddasjkfjkdsajkfkjew大撒發空間撒附近發蘇打粉絕對看撒辣椒；看風景額外前鋒傑我靠前峰武器；看風景委屈分看委屈乏味氣氛李；委屈分看了我窮家富路科技武器蘭科維奇快樂；飛機我企鵝快樂；將的撒肌膚抵抗撒；的撒看見瘋狂悄然過去將開啟企鵝給我企鵝個前峰武器個高考前國務卿</div>
                    </div>
                </div> -->
            </div>
            <div class="msg-add-area">
                <textarea id="chat" rows="5" cols="30"></textarea>
                <button id="btnSend">傳送</button>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
    var userid = new Date().valueOf();

    var Chat = {};

    var obj = null;

    Chat.socket = null;

    Chat.connect = (function(host) {
        if ('WebSocket' in window) {
            Chat.socket = new WebSocket(host);
        } else if ('MozWebSocket' in window) {
            Chat.socket = new MozWebSocket(host);
        } else {
            //Console.log('Error: WebSocket is not supported by this browser.');
            return;
        }

        Chat.socket.onopen = function() {
            // Console.log('Info: WebSocket connection opened.');
            document.getElementById('chat').onkeydown = function(event) {
                if (event.keyCode == 13) {
                    Chat.sendMessage();
                }
            };
        };

        Chat.socket.onclose = function() {
            document.getElementById('chat').onkeydown = null;
            //Console.log('Info: WebSocket closed.');
        };

        Chat.socket.onmessage = function(message) {
            var html = $("#msgList").html() + '<div class="msg-item avatar-user"><img class="msg-item-friend-avatar" src="http://img5.imgtn.bdimg.com/it/u=1822899106,40471411&fm=27&gp=0.jpg"><div class="msg-item-right"><div class="msg-item-right-name">lionel</div><div class="msg-item-send-time">'+getNowFormatDate()+'</div><div class="msg-item-right-content">'+message.data+'</div><div style="clear:both;"></div></div></div>';
            $("#msgList").html(html);
        };
    });

    Chat.initialize = function() {
        if (window.location.protocol == 'http:') {
            Chat.connect('ws://localhost:8080/websocket/' + userid);
        } else {
            Chat.connect('wss://localhost:8080/websocket/' + userid);
        }
    };

    Chat.close = function() {
        Chat.socket.onclose();
    };

    Chat.sendMessage = (function() {
        var message = document.getElementById('chat').value;
        if (message != '') {
            obj = {
                message : message,
                from : userid,
                to : -1
            };
            Chat.socket.send(JSON.stringify(obj));
            var html = $("#msgList").html() + '<div class="msg-item avatar-me"><img class="msg-item-friend-avatar" src="http://img5.imgtn.bdimg.com/it/u=1822899106,40471411&fm=27&gp=0.jpg"><div class="msg-item-right"><div class="msg-item-right-name">lionel</div><div class="msg-item-send-time">'+getNowFormatDate()+'</div><div class="msg-item-right-content">'+message+'</div><div style="clear:both;"></div></div></div>';
            $("#msgList").html(html);
            document.getElementById('chat').value = '';
            //Console.log(message);
        }
    });

    Chat.sendPersonalMessage = (function() {
        var content = $("#console").children("p:first-child").text();
        var to = content.substring(0, content.indexOf(":"));
        var message = document.getElementById('chat').value;
        if (message != '') {
            obj = {
                message : message,
                from : userid,
                to : to
            };
            Chat.socket.send(JSON.stringify(obj));
            document.getElementById('chat').value = '';
            //Console.log(message);
        }
    });

    /* var Console = {};

    Console.log = (function(message) {
        var console = document.getElementById('console');
        var p = document.createElement('p');
        p.style.wordWrap = 'break-word';
        p.innerHTML = message;
        console.appendChild(p);
        while (console.childNodes.length > 25) {
            console.removeChild(console.firstChild);
        }
        console.scrollTop = console.scrollHeight;
    }); */

    Chat.initialize();

    document.getElementById('btnSend').onclick = function(){
        Chat.sendMessage();
    }

    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        var hour = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        if(hour >= 0 && hour <= 9){
                hour = "0" + hour;
        }
        if(minutes >= 0 && minutes <= 9){
                minutes = "0" + minutes;
        }
        if(seconds >= 0 && seconds <= 9){
                seconds = "0" + seconds;
        }

        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                + " " + hour+ seperator2 + minutes
                + seperator2 + seconds;
        return currentdate;
    }

    </script>
</body>
</html>

即時通訊WEB網頁仿qq

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE> <html> <head> &

Qt實現的區域網通訊軟體（仿QQ版本）

Qt5實現的區域網通訊工具，支援公網。類似軟體百度一大把，但是還是想整理一份屬於自己的專屬QQ。支援跨平臺。 1目的本文主要介紹利用Qt實現區域網通訊的主要實現流程和一些技術知識點的設計說明。 2總體設計 2.1 功能特點這款區域網通訊軟體是基

【181029】FreeEIM 飛鴿傳書仿QQ即時通訊軟體VC++原始碼

FreeEIM 仿QQ功能的企業即時通訊軟體VC++的原始碼，最後更新於2010年8月份，完成資料庫更改的任務。將聊天記錄改用資料庫形式，暫且使用Access。　　本軟體的視窗和功能都與QQ有點相似，可傳送檔案、視窗抖動、傳送表情等修改功能，並儘量去除所有不相關內容，堅決不對使用者敏感內容作任

Android即時通訊--仿QQ即時聊天：（五）聊天模組

1、複雜ListView的展示聊天模組其實就是一個複雜的ListView，在資料介面卡中，從application中獲取到當前登入的使用者，與聊天訊息中的from引數進行比較，如果兩者相同則說明是自己傳送的訊息，那麼ListView中就顯示傳送訊息的佈局，否則顯示接收訊息

Html(仿QQ登入WEB網頁編寫)小小記錄

1.autocomplete=”off” input 的屬性autocomplete 預設為on ，其含義代表是否讓瀏覽器自動記錄之前輸入的值 2.< form target=”1”> target 屬性規定在何處開啟 action

仿QQ即時通訊軟體開發-賴國榮-專題視訊課程

仿QQ即時通訊軟體開發—7495人已學習課程介紹會使用JAVA的Swing做UI，學會用JAVA操作資料庫，用Java的網路程式設計，多執行緒程式設計，製作一個仿QQ的即時通訊軟體，實現在區域網或者網際網路通訊課程收益製作仿QQ即時通訊軟體，實現在區

Android即時通訊--仿QQ即時聊天：（一）初識Socket

/** * socket服務端 * * @author ZHY * */ public class ServerSocketTest { public static void main(String[] args) throws IOException { final ServerSock

Socket.IO介紹：支持WebSocket、用於WEB端的即時通訊的框架

網絡進行最新版本 ajax 並且移動接口事件 ODB 一、基本介紹　　WebSocket是HTML5的一種新通信協議，它實現了瀏覽器與服務器之間的雙向通訊。而Socket.IO是一個完全由JavaScript實現、基於Node.js、支持WebSocket的協議

詳解C# 網路程式設計系列：實現類似QQ的即時通訊程式

https://www.jb51.net/article/101289.htm 引言：前面專題中介紹了UDP、TCP和P2P程式設計，並且通過一些小的示例來讓大家更好的理解它們的工作原理以及怎樣.Net類庫去實現它們的。為了讓大家更好的理解我們平常中常見的軟體QQ的工作原理，所以在本專題

QQ和微信止步不前，意味著即時通訊社交應用創業的第2春已來？

本文原題“2018社交破局：騰訊求變，挑戰者重來”，來自“鈦媒體”的原創分享。 1、引言錢荒席捲，寒冬已至。最後一顆子彈沒留給微信，卻為寒冬帶來一抹熱度——社交創業。比起去年創投圈對“共享經濟”和“區塊鏈”等風口的狂熱追逐，社交創業可謂是“病樹前頭萬木春”。從曾一度沉寂的創業黑洞到現

微信、QQ等即時通訊軟體為什麼沒有取代電子郵件？

如今，社會資訊化和網路化的發展導致資料量爆炸式增長，微信、QQ、陌陌、facebook等，種類繁多的應用軟體為我們溝通交流搭建更加便捷的橋樑，那為什麼我們依然需要使用電子郵件呢？ 1、電子郵件具有較高的法律效力。作為一種書面正式性的溝通方式，對於工作中的交流，一定要留下記錄，這些記錄需

[原始碼和文件分享] 仿QQ和飛秋並支援語音視訊白板螢幕共享的即時聊天軟體

功能需求分析使用者端的基本聊天資訊傳送，這些基本聊天資訊包括文字和圖片。文字和圖片聊天是聊天軟體最基礎的功能。使用者通過輸入IP來查詢使用者，並申請加為好友，在對方同意加為好友後，線上使用者列表就會更新使用者，把加入的使用者新增到使用者列表中。這樣，兩個使用者之前就可以實現通訊了。在資訊

websocket 和 dwr 做web端即時通訊

一、WebSocket是HTML5出的東西（協議），也就是說HTTP協議沒有變化，或者說沒關係，但HTTP是不支援持久連線的（長連線，迴圈連線的不算）首先HTTP有1.1和1.0之說，也就是所謂的keep-alive，把多個HTTP請求合併為一個，但是Websocket其實是一個新協議，跟HTTP協議基本

幾款web版整合 QQ msn icq yahoo通 Gtalk等即時聊天http //hi baidu com/ej

直到最近為止,我們常用的即時聊天工具(QQ、msn等)了Web版,大家不用下載龐大軟體,直接開啟網頁就可以與自己的好友聊天,非常方便.在此將時彙總，便於大家查詢，節約大家一點時間。此都是官方網站，請大家放心使用：1、先說我們最常用的QQ 線上

java實現仿QQ即時聊天

這是我的java大作業，這裡就直接貼上我的實驗報告了。 1.1專案介紹這是一個模仿QQ的即時聊天軟體，可以通過執行在本地的服務端，實現兩個客服端之間的通訊，即聊天。採用的是javafx架構作為GUI設計架構，個人認為優點是可以自己設計css，使介面達到美觀的目的。本專案共有登入、註

IM即時通訊專案講解(一)--實現類似qq微信表情面板無縫切換

該系列技術課程來源慕課IM實戰通過該課程可以學習到以下知識點 1、瞭解和開發後臺專案(這個是需要長期積累的，有了這個可以說入門沒問題) 2、學習到IM相關知識點，建立群、新增群、單聊、群聊 3、可以學習到資料庫的相關操作(建表、表之間的關聯等知識

Netty 入門與實戰：仿寫微信 IM 即時通訊系統

作為一個學 Java 的，如果沒有研究過 Netty，那麼你對 Java 語言的使用和理解僅僅停

Web端即時通訊、訊息推送的實現

在瀏覽某些網頁的時候，例如 WebQQ、京東線上客服服務、CSDN私信訊息等類似的情況下，我們可以在網頁上進行線上聊天，或者即時訊息的收取與回覆，可見，這種功能的需求由來已久，並且應用廣泛。網上關於這方面的文章也能搜到一大堆，不過基本上都是理論，真正能夠執行

SignalR快速入門 ~ 仿QQ即時聊天，訊息推送，單聊，群聊，多群公聊（基礎=》提升）

SignalR快速入門 ~ 仿QQ即時聊天，訊息推送，單聊，群聊，多群公聊（基礎=》提升，5個Demo貫徹全篇，感興趣的玩才是真的學）應用情景之一：沒太多連續的時間來研究SignalR，所以我把這篇文章分了三個階段：第一個階段，簡單使用，熟悉並認識SignalR 第二個階段，實現

WEB即時通訊/訊息推送

寫在前面通常進行的Web開發都是由客戶端主動發起的請求，然後伺服器對請求做出響應並返回給客戶端。但是在很多情況下，你也許會希望由伺服器主動對客戶端傳送一些資料。那麼，該如何實現這個需求，或者說該如何向網頁推送訊息呢？一、推送方式我們知道，

即時通訊WEB網頁仿qq

相關推薦