2. 程式人生 > >Android開發--IM聊天專案（一）

Android開發--IM聊天專案（一）

阿新 • • 發佈：2019-02-01

在知乎上看了一篇文章，感覺受益匪淺。認真迭代一個專案比盲目的多寫幾個app的收益會更大，還有就是認真的夯實基礎，拿offer面試的時候也會更注重基礎，還有半年的時間來準備，也就不打算再寫其它的專案了，部落格方面的話就不定期來寫寫最近的學習心得，還有這個專案的進展吧。每篇文章的最後都會分析一下目前的缺點以及短期計劃。
專案方向：IM（Instant Messenge）聊天專案
專案要求：Android端：UI、訊息持久化（讀寫、快取）、長連結網路（解決NAT 超時、DHCP續租、參考TLS1.3的安全機制、私有協議設計、大檔案分片、失敗重試機制設計）、多執行緒、訊息推送、訊息同步等。
服務端：持久化（表設計、分庫機制）、傳送佇列、連線管理、併發、負載均衡等。

下面開始進入正文：截至本篇文章、已經實現了網頁端、伺服器端（NodeJs）、和android端的最簡單基礎的功能，只能夠實現簡單的聊天。網頁地址為：http://www.spwannasing.cn:4000/ 網頁端目前只打算用來測試、不會過多的投入。
如此迅速的就能實現三個端的核心功能，還是用了不少外部庫和框架的。比如android端，用了一個socket的支援庫，實現和伺服器連線。這一點要反思，下面幾天要研究一下這個socket原始碼，還有就是相關的一些傳輸協議、原來太年輕不重視的計算機網路的基礎知識還是相當重要的，切記切記啊。
先來看一下服務端，直接上程式碼：

var express = require
 
('express'),
    app = express(),
    server = require('http').createServer(app),
    io = require('socket.io').listen(server),
    users = [];
app.use('/', express.static(__dirname + '/www'));
server.listen(process.env.PORT || 4000);
io.sockets.on('connection', function(socket) {
    socket.on('login', function(nickname) {
        if
 
 (users.indexOf(nickname) > -1) {
            socket.emit('nickExisted');
        } else {
            //socket.userIndex = users.length;
            socket.nickname = nickname;
            users.push(nickname);
            socket.emit('loginSuccess');
            io.sockets.emit('system', nickname, users.length, 'login');
        };
    });
    //user leaves
    socket.on('disconnect', function() {
        if (socket.nickname != null) {
            //users.splice(socket.userIndex, 1);
            users.splice(users.indexOf(socket.nickname), 1);
            socket.broadcast.emit('system', socket.nickname, users.length, 'logout');
        }
    });
    //new message get
    socket.on('postMsg', function(msg, color) {
        socket.broadcast.emit('newMsg', socket.nickname, msg, color);
    });
    //new image get
    socket.on('img', function(imgData, color) {
        socket.broadcast.emit('newImg', socket.nickname, imgData, color);
    });
});

程式碼很清晰簡單，首先是監聽4000埠，然後用socket通訊，監聽 對應String事件。也沒有什麼資料庫和持久化，所以直接emit出去資訊就可以了。

知識點：利用Socket建立網路連線的步驟

　　建立Socket連線至少需要一對套接字，其中一個運行於客戶端，稱為ClientSocket ，另一個運行於伺服器端，稱為ServerSocket 。

　　套接字之間的連線過程分為三個步驟：伺服器監聽，客戶端請求，連線確認。

　　1、伺服器監聽：伺服器端套接字並不定位具體的客戶端套接字，而是處於等待連線的狀態，實時監控網路狀態，等待客戶端的連線請求。

　　2、客戶端請求：指客戶端的套接字提出連線請求，要連線的目標是伺服器端的套接字。

　　為此，客戶端的套接字必須首先描述它要連線的伺服器的套接字，指出伺服器端套接字的地址和埠號，然後就向伺服器端套接字提出連線請求。

　　3、連線確認：當伺服器端套接字監聽到或者說接收到客戶端套接字的連線請求時，就響應客戶端套接字的請求，建立一個新的執行緒，把伺服器端套接字的描述發給客戶端，一旦客戶端確認了此描述，雙方就正式建立連線。

window.onload = function() {
    var hichat = new HiChat();
    hichat.init();
};
var HiChat = function() {
    this.socket = null;
};
HiChat.prototype = {
    init: function() {
        var that = this;
        this.socket = io.connect();
        this.socket.on('connect', function() {
            document.getElementById('info').textContent = 'get yourself a nickname :)';
            document.getElementById('nickWrapper').style.display = 'block';
            document.getElementById('nicknameInput').focus();
        });
        this.socket.on('nickExisted', function() {
            document.getElementById('info').textContent = '!nickname is taken, choose another pls';
        });
        this.socket.on('loginSuccess', function() {
            document.title = 'hichat | ' + document.getElementById('nicknameInput').value;
            document.getElementById('loginWrapper').style.display = 'none';
            document.getElementById('messageInput').focus();
        });
        this.socket.on('error', function(err) {
            if (document.getElementById('loginWrapper').style.display == 'none') {
                document.getElementById('status').textContent = '!fail to connect :(';
            } else {
                document.getElementById('info').textContent = '!fail to connect :(';
            }
        });
        this.socket.on('system', function(nickName, userCount, type) {
            var msg = nickName + (type == 'login' ? ' joined' : ' left');
            that._displayNewMsg('system ', msg, 'red');
            document.getElementById('status').textContent = userCount + (userCount > 1 ? ' users' : ' user') + ' online';
        });
        this.socket.on('newMsg', function(user, msg, color) {
            that._displayNewMsg(user, msg, color);
        });
        this.socket.on('newImg', function(user, img, color) {
            that._displayImage(user, img, color);
        });
        document.getElementById('loginBtn').addEventListener('click', function() {
            var nickName = document.getElementById('nicknameInput').value;
            if (nickName.trim().length != 0) {
                that.socket.emit('login', nickName);
            } else {
                document.getElementById('nicknameInput').focus();
            };
        }, false);
        document.getElementById('nicknameInput').addEventListener('keyup', function(e) {
            if (e.keyCode == 13) {
                var nickName = document.getElementById('nicknameInput').value;
                if (nickName.trim().length != 0) {
                    that.socket.emit('login', nickName);
                };
            };
        }, false);
        document.getElementById('sendBtn').addEventListener('click', function() {
            var messageInput = document.getElementById('messageInput'),
                msg = messageInput.value,
                color = document.getElementById('colorStyle').value;
            messageInput.value = '';
            messageInput.focus();
            if (msg.trim().length != 0) {
                that.socket.emit('postMsg', msg, color);
                that._displayNewMsg('me', msg, color);
                return;
            };
        }, false);
        document.getElementById('messageInput').addEventListener('keyup', function(e) {
            var messageInput = document.getElementById('messageInput'),
                msg = messageInput.value,
                color = document.getElementById('colorStyle').value;
            if (e.keyCode == 13 && msg.trim().length != 0) {
                messageInput.value = '';
                that.socket.emit('postMsg', msg, color);
                that._displayNewMsg('me', msg, color);
            };
        }, false);
        document.getElementById('clearBtn').addEventListener('click', function() {
            document.getElementById('historyMsg').innerHTML = '';
        }, false);
        document.getElementById('sendImage').addEventListener('change', function() {
            if (this.files.length != 0) {
                var file = this.files[0],
                    reader = new FileReader(),
                    color = document.getElementById('colorStyle').value;
                if (!reader) {
                    that._displayNewMsg('system', '!your browser doesn\'t support fileReader', 'red');
                    this.value = '';
                    return;
                };
                reader.onload = function(e) {
                    this.value = '';
                    that.socket.emit('img', e.target.result, color);
                    that._displayImage('me', e.target.result, color);
                };
                reader.readAsDataURL(file);
            };
        }, false);
        this._initialEmoji();
        document.getElementById('emoji').addEventListener('click', function(e) {
            var emojiwrapper = document.getElementById('emojiWrapper');
            emojiwrapper.style.display = 'block';
            e.stopPropagation();
        }, false);
        document.body.addEventListener('click', function(e) {
            var emojiwrapper = document.getElementById('emojiWrapper');
            if (e.target != emojiwrapper) {
                emojiwrapper.style.display = 'none';
            };
        });
        document.getElementById('emojiWrapper').addEventListener('click', function(e) {
            var target = e.target;
            if (target.nodeName.toLowerCase() == 'img') {
                var messageInput = document.getElementById('messageInput');
                messageInput.focus();
                messageInput.value = messageInput.value + '[emoji:' + target.title + ']';
            };
        }, false);
    },
    _initialEmoji: function() {
        var emojiContainer = document.getElementById('emojiWrapper'),
            docFragment = document.createDocumentFragment();
        for (var i = 69; i > 0; i--) {
            var emojiItem = document.createElement('img');
            emojiItem.src = '../content/emoji/' + i + '.gif';
            emojiItem.title = i;
            docFragment.appendChild(emojiItem);
        };
        emojiContainer.appendChild(docFragment);
    },
    _displayNewMsg: function(user, msg, color) {
        var container = document.getElementById('historyMsg'),
            msgToDisplay = document.createElement('p'),
            date = new Date().toTimeString().substr(0, 8),
            //determine whether the msg contains emoji
            msg = this._showEmoji(msg);
        msgToDisplay.style.color = color || '#000';
        msgToDisplay.innerHTML = user + '<span class="timespan">(' + date + '): </span>' + msg;
        container.appendChild(msgToDisplay);
        container.scrollTop = container.scrollHeight;
    },
    _displayImage: function(user, imgData, color) {
        var container = document.getElementById('historyMsg'),
            msgToDisplay = document.createElement('p'),
            date = new Date().toTimeString().substr(0, 8);
        msgToDisplay.style.color = color || '#000';
        msgToDisplay.innerHTML = user + '<span class="timespan">(' + date + '): </span> <br/>' + '<a href="' + imgData + '" target="_blank"><img src="' + imgData + '"/></a>';
        container.appendChild(msgToDisplay);
        container.scrollTop = container.scrollHeight;
    },
    _showEmoji: function(msg) {
        var match, result = msg,
            reg = /\[emoji:\d+\]/g,
            emojiIndex,
            totalEmojiNum = document.getElementById('emojiWrapper').children.length;
        while (match = reg.exec(msg)) {
            emojiIndex = match[0].slice(7, -1);
            if (emojiIndex > totalEmojiNum) {
                result = result.replace(match[0], '[X]');
            } else {
                result = result.replace(match[0], '<img class="emoji" src="../content/emoji/' + emojiIndex + '.gif" />');//todo:fix this in chrome it will cause a new request for the image
            };
        };
        return result;
    }
};

先說一下明顯的缺點再放出程式碼吧：目前的功能唯一的難點。。socket連線用了一個socket.io的外部庫。。。導致寫出來毫無成就感，應該逐步自己來實現這些功能。

package com.sp.chattingroom;

import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

import com.github.nkzawa.emitter.Emitter;
import com.github.nkzawa.socketio.client.IO;
import com.github.nkzawa.socketio.client.Socket;
import com.sp.chattingroom.Adapter.ChatRecyclerAdpter;
import com.sp.chattingroom.Model.Msg;

import java.net.URISyntaxException;
import java.util.ArrayList;


import butterknife.BindView;
import butterknife.ButterKnife;

public class ChatActivity extends AppCompatActivity {
    private static final String TAG = "ChatActivity";
    @BindView(R.id.text_list)RecyclerView recyclerView;
    @BindView(R.id.send_btn)Button button;
    @BindView(R.id.chat_edit)EditText editText;
    private static String IPAddress="115.159.38.75";
    private static int PORT=4000;
    private Socket socket=null;
    private ChatRecyclerAdpter adpter;
    private ArrayList<Msg> msg_list=new ArrayList<>(),msg_list_save=new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        adpter=new ChatRecyclerAdpter(this,msg_list);
        LinearLayoutManager manager=new LinearLayoutManager(this);
        recyclerView.setLayoutManager(manager);
        recyclerView.setAdapter(adpter);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String msg_send=editText.getText().toString();
                Msg msg=new Msg();
                msg.setType(1);
                msg.setContent(msg_send);
                msg_list_save.add(msg);
                Message.obtain(handler).sendToTarget();
                socket.emit("postMsg",msg_send);
                editText.setText("");
            }
        });
        new Thread(new Runnable() {
            @Override
            public void run() {
                try {
                    Log.e(TAG, "onCreate: start" );
                    socket= IO.socket("http://115.159.38.75:4000");
                    socket.connect();
                }catch (URISyntaxException e){
                    Log.e(TAG, "run: "+"error" );
                    e.printStackTrace();
                }
                Log.e(TAG, "run: "+socket.connected());
                socket.emit("login","CallMeSp");
                socket.on("nickExisted", new Emitter.Listener() {
                    @Override
                    public void call(Object... args) {
                        Log.e(TAG, "nickExisted" );
                    }
                });
                socket.on("loginSuccess", new Emitter.Listener() {
                    @Override
                    public void call(Object... args) {
                        Log.e(TAG, "loginSuccess");
                    }
                });
                socket.on("newMsg", new Emitter.Listener() {
                    @Override
                    public void call(Object... args) {
                        String newcontent=args[1].toString();
                        Msg msg=new Msg();
                        msg.setContent(newcontent);
                        msg.setType(0);
                        msg_list_save.add(msg);
                        Message.obtain(handler).sendToTarget();
                        Log.e(TAG, "call: "+args.length );
                        Log.e(TAG, "newmsg:"+args[2].toString()+"\nnewmsg:"+args[1].toString()+"newmsg:"+args[0]);
                    }
                });
            }
        }).start();
    }
    Handler handler=new Handler(){
        @Override
        public void handleMessage(Message message){
            msg_list.clear();
            msg_list.addAll(msg_list_save);
            adpter.notifyDataSetChanged();
        }
    };
    @Override
    public void onDestroy(){
        super.onDestroy();
        socket.close();
    }
}

菜的摳腳。前路漫漫。
當前要做的事

  • 弄清socket.io的原始碼。
  • android端實現按天的聊天記錄持久化
  • 優化UI、顯示發言人的ID

相關推薦

Android開發--IM聊天專案（一）

在知乎上看了一篇文章，感覺受益匪淺。認真迭代一個專案比盲目的多寫幾個app的收益會更大，還有就是認真的夯實基礎，拿offer面試的時候也會更注重基礎，還有半年的時間來準備，也就不打算再寫其它的專案了，部落格方面的話就不定期來寫寫最近的學習心得，還有這個專案的進展

安卓開發實戰 大學班級APP開發 練手專案 （一）Android Studio 自帶模板Bottom Navigation Activity 的使用

一、建立Bottom Navigation 使用Android Studio建立工程，在選擇activity的時候選擇Bottom Navigation Activity 之後 xml檔案 程式碼修改如下 <?xml version="1.0" encoding=

Android開發模板代碼（一）——簡單打開圖庫選擇照片

image string code index targe contex 數字 vid equals 首先，先貼上樣本代碼 //檢查權限 public void checkPermission() { if (ContextCompat.c

【SSH實戰】IntelliJ IDEA環境開發BOS物流專案（一）環境搭建

一、專案概述二、搭建專案開發環境（一）資料庫環境/*建立一個數據庫*/ CREATE DATABASE bos CHARACTER SET utf8; /*建立一個新使用者*/ CREATE USER lee IDENTIFIED BY 'root'; /*對新使用者進行授權

Android開發藝術探索筆記（一） Activity的生命週期和啟動模式(1)

Activity作為Android開發中最常用的一個元件，是Android開發人員必須熟悉且掌握的重要內容。同時Activity也是在面試中經常被問到的一個方向。因此，掌握Activity的重要性也不言而喻。這或許也是為什麼任大神會在《Android開發藝術探索

Android開發之藍芽（一）——基於SPP協議藍芽模組通訊

使用裝置 基本概念 基本流程 本文意在介紹藍芽開發的主要流程，學習使用藍芽開發一個星期了，寫寫一個星期以來遇到的一些小問題，還有介紹下流程。開發具有基本的通訊功能，本專案主要是用於與藍芽模組的串列埠讀寫功能。 下一篇文章還有Android開

Android專案開發前準備工作（一），android專案開發

1：專案開發前，我們一定要全面瞭解專案中所有的介面需求，實現介面都需要用到哪些元件，比如現在的Android應用中特別流行圓形 Icon、Listview上滑載入、下拉重新整理、百度定位、各種分享、Listview動態載入網路圖片等等所有的需求，在應用開發前，

Android 項目開發基礎再回顧（一）

android1，主activity_splash：<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.andro

Vue全家桶+Egg從0開發大型專案（一）搭建專案

前言 因為要開發本科畢設，做一個校友交流平臺，正好想記錄下整個開發過程，同時也分享給各位。當然那些需求調研的，前期設計的就省略啦。 專案大概是一個全棧的專案，使用的IDE是vscode（期間涉及一些外掛、配置推薦），大概的專案技術棧: vue + vue-router + vuex + vue-i

Android端實現多人音視訊聊天應用（一）

本文轉載於資深Android開發者“東風玖哥”的部落格。 本系列文章分享了基於Agora SDK 2.1實現多人視訊通話的實踐經驗。 轉載已經過原作者許可。原文地址 自從2016年，鼓吹“網際網路寒冬”的論調甚囂塵上，2017年亦有愈演愈烈之勢。但連麥直播、線上抓娃

[Android]ToolBar使用詳解（一）——專案配置

private Toolbar mToolbar; private WebFragment mWebFragment; private long mBeforeTime; @Override protected void onCreate(Bundle savedInst

小KING教你做android專案（一）

寫在專案開始之前： 最近關於android的視訊教程，入門的書籍也已經有很多了，例如我的入門就是看了mars的視訊教程。但是這麼一圈學習下來，覺得真正快速提高的，不是在看視訊，而是在實際工作中動手做專

Android開源專案（一）音樂播放器

作為一個有追求的程式設計師來說，專案原始碼必須看，但是網上那麼多資源是不讓你無從下手啊，博主今天為大家推薦五個經典專案吧。 一、android-UniversalMusicPlayer 這個開源專案展示瞭如何實現一個橫跨各種Android平臺的音樂播放器，包括手機，平板，汽車，手錶，電視等。 架構：

【Android】Android開源專案（一）音樂播放器原始碼彙總

作為一個有追求的程式設計師來說，專案原始碼必須看，但是網上那麼多資源是不讓你無從下手啊，博主今天為大家推薦五個經典專案吧。 一、android-UniversalMusicPlayer 這個開源專案展示瞭如何實現一個橫跨各種Android平臺的音樂播放器，包

基於SpringBoot開發一套完整的專案（一）準備工作

1.1 SpringBoot簡介① 為所有Spring 開發提供一個更快更廣泛的人門體驗。② 零配置。無冗餘程式碼生成和XML 強制配置，遵循“約定大於配置” 。③ 集成了大量常用的第三方庫的配置， Spring Boot 應用為這些第三方庫提供了幾乎可以零配置的開箱即用的能

React-Native 之Android應用開發踩坑紀 （一）————windows環境下配置

歡迎轉載，轉載註明出處： 我不只是看客 自從在公司中被老大安利了移動開發的未來 React-Native之後開始關注相關，想嘗試相關app開發。正好畢業準備畢設，腦子一熱就選擇了RN來開發一款app……題目上交就不能改了，現在好後悔。。。但硬著頭皮上吧 ，廢

Android Studio開發APP常用方法（一）

選擇選單，彈出子選單，點選選項跳轉到新Activity SubMenu prog = menu.addSubMenu("啟動程式"); prog.setHeaderTitle("選擇要啟動的程式"); MenuItem

談一談Java開發中的坑（一） -- log4j2在SaaS專案中的應用

背景介紹： 做server端開發有些年頭了，特別是開始做SaaS型別的專案時，深知log的重要性，特別是半夜三更使用者（大都是美國那邊的）遇到問題的電話打過來，這個時候沒有一個強大log，那只有抓瞎的份了。以前都是走的微軟系的開發工具，log的框架也是別人早就寫好的，所以

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

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

vue2.0+vue-router2.0+axios+webpack開發webapp專案（一）

前言：本人第一次將vue運用到實際專案中，將實際開發流程簡單描述下（第一次寫部落格，有問題希望及時提出，討厭噴子。） 一.安裝node環境   首先我們需要安裝node環境，這個想必不用多說,可以直接到中文官網http://nodejs.cn/下載安裝包。其