'2018/09'에 해당되는 글 15건

AndroidManifest.xml 파일에 추가할 사항

<application
    android:allowBackup="false"
    android:icon="@drawable/icon_console"
    android:label="@string/app_name"
    android:supportsRtl="true"
    android:theme="@style/AppTheme"
    android:usesCleartextTraffic="true"> <!-- http:// 통신일 경우에도 통신 가능하도록 -->
 

앱 build.gradle 은 androidX 로 변경한다. 구글링하면 나온다.

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])

    // implementation 'com.android.support:appcompat-v7:28.0.0'
    //implementation 'com.android.support.constraint:constraint-layout:1.1.3'

    implementation 'androidx.appcompat:appcompat:1.0.2'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    implementation 'gun0912.ted:tedpermission:2.0.0'
    implementation 'com.android.volley:volley:1.1.1'
}

private void LoginVolley(final String loginID, final String loginPW) {
    // 1. RequestQueue 생성 및 초기화
    RequestQueue requestQueue = Volley.newRequestQueue(context);

    String url = Value.IPADDRESS + "/loginChk.php";

    // 2. Request Obejct인 StringRequest 생성
    StringRequest request = new StringRequest(Request.Method.POST, url,
            new Response.Listener<String>() {
                @Override
                public void onResponse(String response) {
                    Log.d("result", "[" + response + "]");
                }
            },
            new Response.ErrorListener() {
                @Override
                public void onErrorResponse(VolleyError error) {
                    Log.d("error", "[" + error.getMessage() + "]");
                }
            }) {
        @Override
        protected Map<String, String> getParams() throws AuthFailureError {
            Map<String, String> params = new HashMap<>();
            params.put("loginID", Value.encrypt(loginID));
            params.put("loginPW", Value.encrypt(loginPW));
            return params;
        }
    };

    // 3) 생성한 StringRequest를 RequestQueue에 추가
    requestQueue.add(request);
}

 private void LoginVolley(final String loginID, final String loginPW) {
    // 1. RequestQueue 생성 및 초기화
    RequestQueue requestQueue = Volley.newRequestQueue(context);

    String url = Value.IPADDRESS + "/loginChk.php";

    // 2. Request Obejct인 StringRequest 생성
    StringRequest request = new StringRequest(Request.Method.POST, url,
            new Response.Listener<String>() {
                @Override
                public void onResponse(String response) {
                    Log.d("result", "[" + response + "]"); // 서버와의 통신 결과 확인 목적
                    showJSONList(response);
                }
            },
            new Response.ErrorListener() {
                @Override
                public void onErrorResponse(VolleyError error) {
                    Log.d("error", "[" + error.getMessage() + "]");
                }
            }) {
        @Override
        protected Map<String, String> getParams() throws AuthFailureError {
            Map<String, String> params = new HashMap<>();
            params.put("loginID", Value.encrypt(loginID));
            params.put("loginPW", Value.encrypt(loginPW));
            params.put("uID", Value.encrypt(Value.getPhoneUID(context)));
            params.put("AppVersion", Value.VERSION);
            params.put("phoneVersion", Build.VERSION.RELEASE);
            params.put("phoneBrand", Build.BRAND);
            params.put("phoneModel", Build.MODEL);
            params.put("keyword", Value.encrypt(Value.URLkey()));
            return params;
        }
    };

    // 3) 생성한 StringRequest를 RequestQueue에 추가
    requestQueue.add(request);
}

private void showJSONList(String JSONdata) {
    // 서버 정보를 파싱하기 위한 변수 선언
    try {
        JSONObject jsonObj = new JSONObject(JSONdata);
        JSONArray logininfo = jsonObj.getJSONArray("result");

        JSONObject c = logininfo.getJSONObject(0);
        idx = Value.decrypt(c.getString("IDX"));
        dept1Code = Value.decrypt(c.getString("Dept1Code"));
        dept2Code = Value.decrypt(c.getString("Dept2Code"));

        System.out.println("idx : " + idx);

        if (Integer.parseInt(idx) > 0) { // 로그인 정보 일치
            pref = getSharedPreferences("pref", Activity.MODE_PRIVATE);
            SharedPreferences.Editor editor = pref.edit();

            editor.putString("id", loginID);
            editor.putString("pw", loginPW);
            editor.putString("autologin", "checked"); // 로그인되면 무조건 자동로그인 처리
            editor.putString("idx", idx); // 로그인 사용자의 idx
            editor.putString("category1", dept1Code);
            editor.putString("category2", dept2Code);
            editor.putString("uID", uID);
            editor.putString("registrationID", null);

            editor.commit();

            startActivity(new Intent(getApplication(), Main.class));
            finish(); // 현재 Activity 를 없애줌

        } else if (idx.equalsIgnoreCase("-1")) { // 등록된 단말기와 불일치
            deviceDismatch_showAlert();
        } else if (idx.equalsIgnoreCase("0")) {
            showAlert();
        } else if (idx.equalsIgnoreCase("-2")) {
            showDisAgree();
        } else if (idx.equalsIgnoreCase("-3")) {
            showDeny();
        } else {
            Toast.makeText(Login.this, "서버로부터 정보가 잘못 전송되었습니다", Toast.LENGTH_SHORT).show();
        }

    } catch (JSONException e) {
        e.printStackTrace();
    }
}

 <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.dcdroid.chatapp">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.REQUEST_INSTALL_PACKAGES" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.CALL_PHONE" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
    <uses-permission android:name="android.permission.READ_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".Login">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

 package com.dcdroid.chatapp;

import android.annotation.TargetApi;
import android.app.Activity;
import android.content.Context;
import android.content.DialogInterface;
import android.content.Intent;
import android.content.SharedPreferences;
import android.content.pm.PackageManager;
import android.net.ConnectivityManager;
import android.net.NetworkInfo;
import android.net.Uri;
import android.os.AsyncTask;
import android.os.Build;
import android.os.Bundle;
import android.provider.Settings;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.Toast;

import com.gun0912.tedpermission.PermissionListener;
import com.gun0912.tedpermission.TedPermission;

import java.util.ArrayList;

public class Login extends AppCompatActivity {
    private static String TAG = "LoginActivity";
    Context context;
    public SharedPreferences pref;
    EditText etId;
    EditText etPw;
    String loginID;
    String loginPW;
    CheckBox autologin;

    public static int OVERLAY_PERMISSION_REQ_CODE = 1234;

    PermissionListener permissionlistener = new PermissionListener() {
        @Override
        public void onPermissionGranted() {
            initView();
        }

        @Override
        public void onPermissionDenied(ArrayList<String> deniedPermissions) {
            Toast.makeText(Login.this, "권한 허용을 하지 않으면 서비스를 이용할 수 없습니다.", Toast.LENGTH_SHORT).show();
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        context = this.getBaseContext();

        // 네트워크 연결상태 체크
        if (NetworkConnection() == false) NotConnected_showAlert();
        checkPermissions();
    }

    private void checkPermissions() {
        if (Build.VERSION.SDK_INT >= 23) { // 마시멜로(안드로이드 6.0) 이상 권한 체크
            TedPermission.with(context)
                    .setPermissionListener(permissionlistener)
                    .setRationaleMessage("앱을 이용하기 위해서는 접근 권한이 필요합니다")
                    .setDeniedMessage("앱에서 요구하는 권한설정이 필요합니다...\n [설정] > [권한] 에서 사용으로 활성화해주세요.")
                    .setPermissions(new String[]{
                            android.Manifest.permission.READ_PHONE_STATE,
                            android.Manifest.permission.CALL_PHONE,  // 전화걸기 및 관리
                            android.Manifest.permission.WRITE_CONTACTS, // 주소록 액세스 권한
                            android.Manifest.permission.READ_EXTERNAL_STORAGE,
                            android.Manifest.permission.WRITE_EXTERNAL_STORAGE // 기기, 사진, 미디어, 파일 엑세스 권한
                            //android.Manifest.permission.RECEIVE_SMS //, // 문자 수신
                            //android.Manifest.permission.CAMERA
                    })
                    .check();

        } else {
            initView();
        }
    }

    public void checkPermissionOverlay() {
        if (Build.VERSION.SDK_INT >= 23 && !Settings.canDrawOverlays(this)) {
            Intent intentSettings = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
                    Uri.parse("package:" + getPackageName()));
            startActivityForResult(intentSettings, OVERLAY_PERMISSION_REQ_CODE);
        }
    }

    @TargetApi(Build.VERSION_CODES.M)
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);

        if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
            if (!Settings.canDrawOverlays(this)) {
                // You don't have permission
            } else {
                Toast.makeText(this, "오버레이 권한 없이는 발신자정보 팝업을 이용할 수 없습니다...", Toast.LENGTH_SHORT).show();
            }
        }
    }

    private void initView() {
        checkPermissionOverlay(); // 오버레이 권한 설정

        findViewById(R.id.setting).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (Build.VERSION.SDK_INT >= 26) {
                    NonSecretApp_Setting(); // 출처를 알 수 없는 앱 설정 화면 띄우기
                } else {
                    startActivity(new Intent(android.provider.Settings.ACTION_SECURITY_SETTINGS));
                }
            }
        });

        etId = (EditText) findViewById(R.id.login_id_edit);
        etPw = (EditText) findViewById(R.id.login_pw_edit);
        autologin = (CheckBox) findViewById(R.id.autologinchk);

        pref = getSharedPreferences("pref", Activity.MODE_PRIVATE);
        String savedID = pref.getString("id", "");
        etId.setText(savedID);
        String passwd = pref.getString("pw", ""); // 보안상 여기에 적으면 안되는 코드지만 테스트 목적이라...
        etPw.setText(passwd);
        if (!pref.getString("id", "").equals(""))
            etPw.requestFocus();
        String chk1 = pref.getString("autologin", "");
        if (chk1.equals("checked"))
            autologin.setChecked(true);

        if (!pref.getString("loginID", "").equals("")) etPw.requestFocus();

        Button submit = (Button) findViewById(R.id.login_btn);
        submit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                loginID = etId.getText().toString().trim();
                loginPW = etPw.getText().toString().trim();
                if (loginID != null && !loginID.isEmpty() && loginPW != null && !loginPW.isEmpty()) {
                    // 여기에 적을 코드는 아닌데 테스트 목적이다보니 귀차니즘으로 여기에 적음
                    pref = getSharedPreferences("pref", Activity.MODE_PRIVATE);
                    SharedPreferences.Editor editor = pref.edit();

                    editor.putString("id", loginID);
                    editor.putString("pw", loginPW);
                    editor.putString("autologin", "checked"); // 로그인되면 무조건 자동로그인 처리
                    editor.commit();
                    // 실제 로그인할 함수 실행 (아이디와 패스워드 정보를 넘겨줌)
                    // 블로그에 오픈된 코드를 찾아서 같이 활용하면 서버와의 통신이 가능
                    new UserLoginTask().execute(loginID,loginPW);
                }
            }
        });
    }

    private void NonSecretApp_Setting() {
        if (Build.VERSION.SDK_INT >= 26) { // 출처를 알 수 없는 앱 설정 화면 띄우기
            PackageManager packageManager = getPackageManager();
            boolean isTrue = packageManager.canRequestPackageInstalls();

            if (!packageManager.canRequestPackageInstalls()) {
                AlertDialog.Builder b = new AlertDialog.Builder(this, android.R.style.Theme_DeviceDefault_Light_Dialog);
                b.setTitle("알림");
                b.setMessage("보안을 위해 스마트폰 환경설정의 '앱 설치 허용'을 설정해 주시기 바랍니다.설정화면으로 이동하시겠습니까?");
                b.setCancelable(false);
                b.setPositiveButton("설정하기", new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog, int which) {
                        Intent intent = new Intent(Settings.ACTION_MANAGE_UNKNOWN_APP_SOURCES);
                        intent.setData(Uri.parse("package:" + getPackageName()));
                        startActivity(intent);
                    }
                });

                b.setNegativeButton("건너띄기", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {

                    }
                });
                b.show();
            }
        }
    }

    private void NotConnected_showAlert() {
        AlertDialog.Builder builder = new AlertDialog.Builder(Login.this);
        builder.setTitle("네트워크 연결 오류");
        builder.setMessage("사용 가능한 무선네트워크가 없습니다.\n" + "먼저 무선네트워크 연결상태를 확인해 주세요.")
                .setCancelable(false)
                .setPositiveButton("확인", new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog, int id) {
                        finish(); // exit
                        //application 프로세스를 강제 종료
                        android.os.Process.killProcess(android.os.Process.myPid());
                    }
                });
        AlertDialog alert = builder.create();
        alert.show();

    }

    private boolean NetworkConnection() {
        int[] networkTypes = {ConnectivityManager.TYPE_MOBILE, ConnectivityManager.TYPE_WIFI};
        try {
            ConnectivityManager manager = (ConnectivityManager) getSystemService(Context.CONNECTIVITY_SERVICE);
            for (int networkType : networkTypes) {
                NetworkInfo activeNetwork = manager.getActiveNetworkInfo();
                if (activeNetwork != null && activeNetwork.getType() == networkType) {
                    return true;
                }
            }
        } catch (Exception e) {
            return false;
        }
        return false;
    }

    private class UserLoginTask  extends AsyncTask<String, Void, Boolean> {
        // String 으로 값을 전달받은 값을 처리하고, Boolean 으로 doInBackground 결과를 넘겨준다.
        @Override
        protected Boolean doInBackground(String... strings) {
            return null;
        }
    }
}

 const express = require('express'),
    http = require('http'),
    app = express(),
    server = http.createServer(app),
    io = require('socket.io').listen(server);

app.get('/', (req, res) => {
    res.sendFile(__dirname+'/index.html');
});

var numUsers=0;
var usernames=[];
io.on('connection', (socket) => {
    var addedUser = false;
    socket.on('join', function (username) {
        if (addedUser) return;
        socket.username = username;
        ++numUsers;
        addedUser = true;
        usernames.push(socket.username);
        console.log(socket.username + "님이 접속하셨습니다.");
        console.log('접속한 사용자수 : '+numUsers+'명');
        socket.broadcast.emit('userjoinedthechat', socket.username + "님이 접속하셨습니다.");
        updateUsernames();
    });

    function updateUsernames(){
        io.sockets.emit('usernames', usernames);
    }

    socket.on('messagedetection', (senderNickname, messageContent) => {
        // 서버 콘솔상에 메시지 보여주기
        console.log(senderNickname + " :" + messageContent);
        //message object 생성
        let message = {"message": messageContent, "senderNickname": senderNickname}
        // 클라이언트(Web, Android)로 메시지 전송
        io.emit('message', message); // 나를 포함한 모든 클라이언트에게 전송
    });

    socket.on('disconnect', function () {
        if (addedUser) {
            --numUsers;
            usernames.splice(usernames.indexOf(socket.username), 1);
        }
        console.log(socket.username+"님이 퇴장했습니다");
        console.log('접속한 사용자수 : '+numUsers+'명');
        socket.broadcast.emit("userdisconnect", socket.username + "님이 퇴장했습니다");
        // 나를 제외한 모든 클라이언트에게 전송
        updateUsernames();
    });

});

server.listen(3000, () => {
    console.log('Node chat app is running on port 3000');
});

<!DOCTYPE html>
<html>
<head>
<title>Web Chat Messenger</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type="text/css" rel="stylesheet">
<style type="text/css">
.container{max-width:1170px; margin:auto;}
img{ max-width:100%;}

.messaging { padding: 0 0 50px 0;}

.inbox_msg {
  border: 1px solid #c4c4c4;
  clear: both;
  overflow: hidden;
}
.inbox_people {
  background: #f8f8f8 none repeat scroll 0 0;
  float: left;
  overflow: hidden;
  width: 35%; border-right:1px solid #c4c4c4;
}
.top_spac{ margin: 20px 0 0;}

.headind_srch{ padding:10px 29px 10px 20px; overflow:hidden; border-bottom:1px solid #c4c4c4;}
.recent_heading {float: left; width:100%;}
.recent_heading h4 {
  color: #05728f;
  font-size: 21px;
  margin: auto;
}

.inbox_chat { height: 550px; overflow-y: scroll;}

.mesgs {
  float: left;
  padding: 20px 5px 5px 10px;
  width: 65%;
}
.msg_history {
  height: 500px;
  overflow-y: auto;
  background: #FFFFFF;
}

.incoming_msg_img {
  display: inline-block;
  width: 6%;
}
.received_msg {
  display: inline-block;
  padding: 0 0 0 10px;
  vertical-align: top;
  width: 92%;
 }
.received_withd_msg { width: 77%;}
.received_withd_msg p {
  background: #F3E2A9 none repeat scroll 0 0;
  border-radius: 3px;
  color: #646464;
  font-size: 14px;
  margin: 0;
  padding: 5px 10px 5px 12px;
  width: 100%;
}
.time_date {
  color: #747474;
  display: block;
  font-size: 12px;
  margin: 8px 0 0;
}

.type_msg {border-top: 1px solid #c4c4c4;position: relative;}
.sent_msg {
  float: right;
  width: 76%;
}
.sent_msg p {
  background: #05728f none repeat scroll 0 0;
  border-radius: 3px;
  font-size: 14px;
  margin: 0; color:#fff;
  padding: 5px 10px 5px 12px;
  width:100%;
}
.outgoing_msg{ overflow:hidden; margin:26px 0 26px;}
.input_msg_write input {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: medium none;
  color: #4c4c4c;
  font-size: 15px;
  min-height: 48px;
  width: 100%;
}

.msg_send_btn {
  background: #05728f none repeat scroll 0 0;
  border: medium none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font-size: 17px;
  height: 33px;
  position: absolute;
  right: 0;
  top: 11px;
  width: 33px;
}


@media screen and (max-width: 800px) {
    .inbox_msg {
      display: block;
      width: 100%;
    }
    .inbox_people {width: 100%;}
    .inbox_chat { width: 100%;height: 250px;}

    .mesgs {
      display: block;
      width: 100%;
      padding: 20px 0px 10px 0px;
    }
    .msg_history {width: 100%;height: 450px;}
    .type_msg {width: 100%;}

}

</style>
</head>

<body>
<div class="container">
    <!--Form to enter UserName-->
    <div class="row" id="nickWrap">
        <div class="col-xs-9">
            <form id="setNick">
                <input id="username" class="form-control" placeholder="사용자명을 입력하세요"/>
                <input type="submit" class="btn btn-primary">
            </form>
        </div>
    </div>
    <!--end username-->
<div class="messaging" id="contentWrap">
<h3 class=" text-center" id="msg_leave">Messaging</h3>
    <div class="inbox_msg">
        <div class="inbox_people">
          <div class="headind_srch">
            <div class="recent_heading">
              <h4>접속 사용자 현황</h4>
            </div>
          </div>

        <div class="inbox_chat">
            <div class="panel panel-default">
                <div class="panel-body" id="users"></div>
            </div>           
        </div>
    </div>

    <div class="mesgs">
        <div class="msg_history" id="chat">
        </div>

        <div class="type_msg">
            <form id="send-message">
            <div class="input_msg_write">
              <textarea rows="3" id="message" class="form-control" placeholder="메시지를 입력하세요" /></textarea>
              <button class="msg_send_btn" type="button"><i class="fa fa-paper-plane-o" aria-hidden="true"></i></button>
            </div>
            </form>
        </div>
    </div>
</div>

<!--node.js and Jquery code-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>
<script>
$(function () {
    var socket = io();
    var myname;
    var i;
    var filter = "win16|win32|win64|mac|macintel";

    $('#contentWrap').hide();

    $('#setNick').submit(function () {
        myname = $('#username').val();
        if(myname.length == 0) {
            alert('이름을 입력하세요');
            return false;
        }
        socket.emit('join', myname);
        $('#nickWrap').hide();
        $('#contentWrap').show();
        return false;
    });

    //List of users
    socket.on('usernames', function (message) {
        var html = '';
        for (i = 0; i < message.length; i++) {
            html += message[i] + '<br/>'
        }
        $('#users').html(html);
    });

    $('.msg_send_btn').click(function (e) {
        e.preventDefault();
        msg_send();
    });

    $('#message').keypress(function (e) {
        if ( navigator.platform ) { // 모바일 접속이면 엔터키를 동작 안되게 처리
            if(filter.indexOf( navigator.platform.toLowerCase() ) > 0){
                if (e.which == 13 && !e.shiftKey) { // Shift + Enter키이면 줄바꿈처리 가능
                    msg_send();
                    return false;
                }
            }
        }
    });

    function msg_send(){
        if($('#message').val().length ==0){
            alert('메시지가 입력되지 않았습니다');
            $('#message').focus();
            return false;
        }
        socket.emit('messagedetection', myname, $('#message').val());
        $('#message').val(''); // 메시지를 전송하고 메시지 전송 창 내용을 비운다.
    }

    socket.on('message', function (msg) {
        msg.message = msg.message.replace(/(?:\r\n|\r|\n)/g, '<br />'); // 줄바꿈 처리
        if(myname == msg.senderNickname){ // 내가 전송한 메시지
            $('#chat').append('<div class="outgoing_msg"><div class="sent_msg"><p> '+ msg.message +'</p><span class="time_date">'+new Date().toLocaleString()+'</span></div></div>');
        } else { // 상대방이 보낸 메시지
            $('#chat').append('<div class="incoming_msg"><div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div><div class="received_msg"><div class="received_withd_msg"><p>'+ msg.message +'</p><span class="time_date">'+msg.senderNickname+', '+new Date().toLocaleString()+'</span></div></div></div>');
        }
        $("#chat").scrollTop($("#chat")[0].scrollHeight); // 최근 메시지 출력된 내용이 보이게 처리
    });

    socket.on('userjoinedthechat', function (msg) {
        $('#chat').append('<div class="incoming_msg"><div class="incoming_msg_img"></div><div class="received_msg"><div class="received_withd_msg"><p>'+ msg +'</p><span class="time_date">'+new Date().toLocaleString()+'</span></div></div></div>');
        $("#chat").scrollTop($("#chat")[0].scrollHeight); // 최근 메시지 출력된 내용이 보이게 처리
    });
   
    socket.on('userdisconnect', function (msg) {
        $('#chat').append('<div class="incoming_msg"><div class="incoming_msg_img"></div><div class="received_msg"><div class="received_withd_msg"><p>'+ msg +'</p><span class="time_date">'+new Date().toLocaleString()+'</span></div></div></div>');
        $("#chat").scrollTop($("#chat")[0].scrollHeight); // 최근 메시지 출력된 내용이 보이게 처리
    });

});
</script>
</body>
</html>

import android.app.Activity;
import android.content.Context;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.View;

public class SoftKeyboardDectectorView extends View {
    // 출처 : http://givenjazz.tistory.com/54
    private boolean mShownKeyboard;
    private OnShownKeyboardListener mOnShownSoftKeyboard;
    private OnHiddenKeyboardListener onHiddenSoftKeyboard;

    public SoftKeyboardDectectorView(Context context) {
        this(context, null);
    }

    public SoftKeyboardDectectorView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        Activity activity = (Activity)getContext();
        Rect rect = new Rect();
        activity.getWindow().getDecorView().getWindowVisibleDisplayFrame(rect);
        int statusBarHeight = rect.top;
        int screenHeight = activity.getWindowManager().getDefaultDisplay().getHeight();
        int diffHeight = (screenHeight - statusBarHeight) - h;
        if (diffHeight > 100 && !mShownKeyboard) { // 모든 키보드는 100px보다 크다고 가정
            mShownKeyboard = true;
            onShownSoftKeyboard();
        } else if (diffHeight < 100 && mShownKeyboard) {
            mShownKeyboard = false;
            onHiddenSoftKeyboard();
        }
        super.onSizeChanged(w, h, oldw, oldh);
    }

    public void onHiddenSoftKeyboard() {
        if (onHiddenSoftKeyboard != null)
            onHiddenSoftKeyboard.onHiddenSoftKeyboard();
    }

    public void onShownSoftKeyboard() {
        if (mOnShownSoftKeyboard != null)
            mOnShownSoftKeyboard.onShowSoftKeyboard();
    }

    public void setOnShownKeyboard(OnShownKeyboardListener listener) {
        mOnShownSoftKeyboard = listener;
    }

    public void setOnHiddenKeyboard(OnHiddenKeyboardListener listener) {
        onHiddenSoftKeyboard = listener;
    }

    public interface OnShownKeyboardListener {
        public void onShowSoftKeyboard();
    }

    public interface OnHiddenKeyboardListener {
        public void onHiddenSoftKeyboard();
    }
} 

public class ChatBoxActivity extends AppCompatActivity {
    Context context;

    public RecyclerView listView;
    public ArrayList<Chat_Item> chatItemList = new ArrayList<>(); ;
    RecyclerView.Adapter listViewAdapter;
    RecyclerView.LayoutManager layoutManager;

    public  EditText editText;
    public  Button send ;
    //declare socket object
    private Socket socket;
    public String Nickname;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_chat_box);
        context = this.getBaseContext();

        editText = (EditText) findViewById(R.id.message) ;
        send = (Button)findViewById(R.id.send);
        // get the nickame of the user
        SharedPreferences pref = getSharedPreferences("pref", Activity.MODE_PRIVATE);
        String userNM = pref.getString("userNM", "");
        String userID = pref.getString("userID", "");
        Nickname = userNM +"("+userID+")";

        final SoftKeyboardDectectorView softKeyboardDecector = new SoftKeyboardDectectorView(this);
        addContentView(softKeyboardDecector, new FrameLayout.LayoutParams(-1, -1));

        softKeyboardDecector.setOnShownKeyboard(new SoftKeyboardDectectorView.OnShownKeyboardListener() {
            @Override
            public void onShowSoftKeyboard() {
                //키보드 등장할 때 채팅창 마지막 입력 내용을 바로 보이도록 처리
                listView.scrollToPosition(chatItemList.size()-1);
            }
        });

        try {
            socket = IO.socket(Value.ChatLive); // 채팅서버 주소
            socket.connect();
            socket.emit("join", Nickname);
        } catch (URISyntaxException e) {
            e.printStackTrace();
        }

       // Adapter에 추가 데이터를 저장하기 위한 ArrayList
        listView = (RecyclerView) findViewById(R.id.messagelist);
        RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(getApplicationContext());
        listView.setLayoutManager(layoutManager);
        listView.setItemAnimator(new DefaultItemAnimator());

        listViewAdapter = new ListViewAdapter(chatItemList, this); // Adapter 생성
        listView.setAdapter(listViewAdapter); // 어댑터를 리스트뷰에 세팅

    }
} 

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
    res.render('chat', { title: 'chat function' }); // View 에 chat.jade 를 추가해야됨
});
module.exports = router; 

extends layout
 
block content
    ul#messages
    form(action='')
      input#m(autocomplete='off')
      button Send
     
    style.
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { padding:0px; font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
 
       
    script(src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js')
    script(src='http://code.jquery.com/jquery-3.3.1.js')
    script.
       
      var socket = io();
       
      $('form').submit(function(){

        // socket.emit('서버로 보낼 이벤트명', 데이터);

        socket.emit('chat message', $('#m').val());
        $('#m').val('');
        return false;
      });
     

      // socket.on('서버에서 받을 이벤트명', function(데이터)
      socket.on('chat message', function(msg){
        $('#messages').append($('<li>').text(msg));
      });
</li>

 {
  "name": "www",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "^1.4.3",
    "cors": "^2.8.4",
    "debug": "~2.6.9",
    "ejs": "^2.6.1",
    "express": "~4.16.0",
    "express-session": "^1.15.6",
    "http-errors": "~1.6.2",
    "jade": "~1.11.0",
    "jquery": "^3.3.1",
    "morgan": "~1.9.0",
    "multer": "^1.3.1",
    "serve-favicon": "^2.5.0",
    "socket.io": "^2.1.1"
  }
}

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');
var chat = require('./routes/chat'); // 추가

var app = express();
var http = require('http').Server(app); // 추가
var io = require('socket.io')(http); // 추가

// view engine 설정
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade'); // ejs, jade

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.set( "ipaddr", "127.0.0.1" ); // 추가
app.set( "port", 3000 ); // 추가


/*** Routing ***/
app.use('/', routes);
app.use('/users', users);
app.use('/chat', chat); // 추가

http.listen(app.get('port'), function(){
    console.log("Express server listening on port " + app.get('port'));
}); // 추가

// socket.IO : Client 가 연결했을 때의 이벤트 처리
// io는 socket.io 패키지를 import한 변수
// socket은 커넥션이 성공했을 때 커넥션에 대한 정보를 담고 있는 변수
io.on('connection', function(socket){
    console.log('a user connected');
    socket.broadcast.emit('hi'); // 나를 제외한 모든 클라이언트에게 전송

    socket.on('disconnect', function(){
        // disconnect 이벤트는 클라이언트와의 연결이 끊어졌을 때 발생
        console.log('user disconnected');
    });

    socket.on('chat message', function(msg){
        console.log('message: ' + msg);
        io.sockets.emit('chat message', msg); // 나를 포함한 모든 클라이언트에게 전송
        // io.to(socket.id).emit('이벤트명' 데이터); // 특정인 한사람에게 메시지 전송
        // socket.join(방의 아이디); // 그룹에 들어가기
        // socket.leave(방의 아이디); // 그룹 떠나기
        // io.to(방의 아이디).emit('이벤트명', 데이터); // 그룹 전체 메시지 전송
        // socket.broadcast.to(방의 아이디).emit('이벤트명', 데이터); // 나를 제외한 그룹 전체 메시지 전송
        // 그룹의 목록과 그룹 안의 소켓들을 확인하는 방법
        // io.adapter.rooms
        // io.of(네임스페이스).adapter.rooms
        // socket.adapter.rooms
    });

});


// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});

module.exports = app;

var express = require('express');
var app = express();

app.get('/', function (req, res) {
  res.send('Hello World!');
});

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_above="@+id/tabmenuLayout" />

    <LinearLayout
        android:id="@+id/tabmenuLayout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true" >

        <Button
            android:id="@+id/btn_tab1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Tab 1"/>

        <Button
            android:id="@+id/btn_tab2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Tab 2"/>

        <Button
            android:id="@+id/btn_tab3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Tab 3"/>

    </LinearLayout>
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="프래그먼트 1" />

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffe4e1">

    <TextView
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="프래그먼트 2" />

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#81DAF5" >

    <TextView
        android:id="@+id/fr_tv03"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_centerInParent="true"
        android:text="프래그먼트 3"
        android:textStyle="bold"/>

</RelativeLayout>

 public class Fragment01 extends Fragment {

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        // onCreateView() : 프래그먼트와 연관된 뷰 계층을 생성하기 위해 호출됨
        // Inflate the layout for this fragment
        ViewGroup rootView = (ViewGroup)inflater.inflate(R.layout.fragment_01, container, false);
        return rootView;
        //return super.onCreateView(inflater, container, savedInstanceState); // Alt + Insert키 누르면 자동 생성되는 return
    }
}

public class Fragment02 extends Fragment {
    TextView textView;
    String strtext;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            strtext = getArguments().getString("edttext"); // Activity 에서 받은 데이터
        }
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        ViewGroup rootView = (ViewGroup)inflater.inflate(R.layout.fragment_02, container, false);
        textView = (TextView) rootView.findViewById(R.id.fr_tv02);
        textView.setText(strtext);
        return rootView;
        //return super.onCreateView(inflater, container, savedInstanceState);
    }
}

 public class Fragment03 extends Fragment {
    TextView textView;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        // onCreateView()로 전달된 container 매개변수가 상위 ViewGroup 이며(액티비티의 레이아웃으로부터), 이 안에 프래그먼트 레이아웃이 삽입
        // savedInstanceState 매개변수는 Bundle이며, 프래그먼트가 재개되는 중에 프래그먼트의 이전 인스턴스에 대한 데이터를 제공
        // Inflate the layout for this fragment
        // Inflate 시키고자 하는 Layout 의 Resource ID, Inflated 된 Layout 의 상위가 될 ViewGroup
        ViewGroup rootView = (ViewGroup)inflater.inflate(R.layout.fragment_03, container, false);
        textView = (TextView) rootView.findViewById(R.id.fr_tv03);
        textView.setText("Fragment 3을 선택했네요.");
        return rootView;
    }
}

 public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    Context context;
    private Button tab1, tab2, tab3;
    private Fragment fragment = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        context = this.getBaseContext();

        tab1 = findViewById(R.id.btn_tab1);
        tab2 = findViewById(R.id.btn_tab2);
        tab3 = findViewById(R.id.btn_tab3);

        tab1.setOnClickListener(this);
        tab2.setOnClickListener(this);
        tab3.setOnClickListener(this);

        if(findViewById(R.id.fragment_container) != null){
            if(savedInstanceState != null) return;
            Fragment01 fragment01 = new Fragment01();
            fragment01.setArguments(getIntent().getExtras());

            FragmentManager fragmentManager = getFragmentManager();
            FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
            // add() 메서드를 사용하여 프래그먼트를 추가하고, 추가할 프래그먼트와 이를 삽입할 뷰를 지정
            fragmentTransaction.add(R.id.fragment_container, fragment01);
            // FragmentTransaction을 변경하고 나면, 반드시 commit()을 호출해야 변경 내용이 적용됨
            fragmentTransaction.commit();
        }
        // 상세 설명은 https://developer.android.com/guide/components/fragments?hl=ko 참조
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.btn_tab1:
                fragment = new Fragment01();
                changeFragment(fragment);
                break;
            case R.id.btn_tab2:
                Bundle bundle = new Bundle();
                bundle.putString("edttext", "From Activity");
                fragment = new Fragment02();
                fragment.setArguments(bundle); // Fragment 로 데이터 전달
                changeFragment(fragment);
                break;
            case R.id.btn_tab3:
                fragment = new Fragment03();
                changeFragment(fragment);
                break;
        }
    }

    private void changeFragment(Fragment fragment) {
        // 프로그래밍 방식으로 프래그먼트를 기존의 ViewGroup에 추가
        // 액티비티가 실행 중인 동안에는 언제든 액티비티 레이아웃에 프래그먼트를 추가 가능
        // 액티비티 내의 프래그먼트를 관리하려면 FragmentManager를 사용해야 함.
        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace(R.id.fragment_container,fragment);
        //fragmentTransaction.addToBackStack(null); // back 버튼을 눌렀을 때 동작하는 옵션.
        fragmentTransaction.commit(); // 트랜잭션을 액티비티에 적용하려면 반드시 commit()을 호출해야 함.
    }
}