Nodejs기초 - 15일차 정리(채팅 1대1)

- Websocket 호환성 확인

Web Sockets

 - LS

Bidirectional communication technology for web apps

Usage% of 

all usersall trackedtracked desktoptracked mobile

• Global

  91.92%+0.21%=92.13%

• unprefixed:

  91.92%+0.17%=92.09%

IE

1. 6 - 9
2. 10
3. 11

Edge*

1. 12 - 17
2. 18

Firefox

1. 2 - 3.6
2. 4 - 5

   See notes:

   1
3. 6 - 10

   See notes:

   2
4. 11 - 64
5. 65
6. 66 - 67

Chrome

1. 4 - 14

   See notes:

   1
2. 15

   See notes:

   2
3. 16 - 71
4. 72
5. 73 - 75

Safari

1. 3.1 - 4
2. 5 - 5.1

   See notes:

   1
3. 6 - 6.1

   See notes:

   2
4. 7 - 11.1
5. 12
6. TP

Opera

1. 10.1
2. 11.5

   See notes:

   1
3. 12.1 - 56
4. 57

iOS Safari*

1. 3.2 - 4.1
2. 4.2 - 5.1

   See notes:

   1
3. 6 - 11.4
4. 12.1

Opera Mini*

1. all

Android Browser*

1. 2.1 - 4.3
2. 4.4 - 4.4.4
3. 67

Blackberry Browser

1. 7

   See notes:

   1
2. 10

Opera Mobile*

1. 12

   See notes:

   1
2. 12.1
3. 46

Chrome for Android

1. 71

Firefox for Android

1. 64

IE Mobile

1. 10
2. 11

UC Browser for Android

1. 11.8

Samsung Internet

1. 4 - 7.4
2. 8.2

QQ Browser

1. 1.2

Baidu Browser

1. 7.12

• Notes
• Known issues (1)
• Resources (10)
• Feedback

Reported to be supported in some Android 4.x browsers, including Sony Xperia S, Sony TX and HTC.

1Partial support in older browsers refers to the websockets implementation using an older version of the protocol and/or the implementation being disabled by default (due to security issues with the older protocol).

2Partial support in older browsers refers to lacking support for binary data.

Bidirectional communication technology for web apps

Usage% of 

all usersall trackedtracked desktoptracked mobile

• Global

  91.92%+0.21%=92.13%

• unprefixed:

  91.92%+0.17%=92.09%

IE

1. 6 - 9
2. 11

Edge*

1. 12 - 17

Firefox

1. 11 - 64
2. 65

Chrome

1. 16 - 71
2. 72

Safari

1. 7 - 11.1
2. 12

Opera

1. 12.1 - 56
2. 57

iOS Safari*

1. 6 - 11.4
2. 12.1

Opera Mini*

1. all

Android Browser*

1. 2.1 - 4.3
2. 4.4 - 4.4.4

Blackberry Browser

Opera Mobile*

Chrome for Android

1. 71

Firefox for Android

1. 64

IE Mobile

1. 11

UC Browser for Android

1. 11.8

Samsung Internet

1. 4 - 7.4

QQ Browser

Baidu Browser

https://caniuse.com/#feat=websockets

WebSocket은 사용자의 브라우저와 서버 사이의 동적인 양방향 연결 채널을 구성하는 HTML5 프로토콜이다. WebSocket API를 통해 서버로 메시지를 보내고 요청 없이 응답을 받아오는 것이 가능하다.

HTTP는 클라이언트에 의해 초기화되기 때문에 서버가 변경사항을 클라이언트에게 알릴 수 있는 방법이 없지만 WebSocket의 연결은 HTTP 통신과는 다르게 클라언트가 특정 주기를 가지고 Polling하지 않아도 변경된 사항을 시기 적절하게 전달할 수 있는 지속적이고 완전한 양방향 연결 스트림을 만들어 주는 기술이다.

Figure 4 — Latency comparison between the polling and WebSocket applications

Polling 과 WebSocket apllications 의 지연시간 비교

https://www.websocket.org/quantum.html

---

1. package.json

{
  "name": "ChatExample",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "body-parser": "^1.15.2",
    "connect-flash": "^0.1.1",
    "cookie-parser": "^1.4.3",
    "cors": "^2.8.1",
    "ejs": "^2.5.2",
    "errorhandler": "^1.4.3",
    "express": "^4.14.0",
    "express-error-handler": "^1.1.0",
    "express-session": "^1.14.2",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.23",
    "mongoose": "^4.6.6",
    "serve-static": "^1.11.2",
    "socket.io": "^1.5.1"
  }
}

---

- socket.io 모듈을 사용하면 웹 소켓을 지원하지 않는 웹 브라우저에서도 웹 소켓을 사용할 수 있다.

 이유 : IE와 같은 브라우저에서는 Ajax를 사용해 데이터를 가져올 수 있도록 XHR(XMLHttpRequest)을 지원했지만 보안문제로 웹 사이트를 제공하는 서버 이외의 다른 서버는 접속할 수 없다는 제약을 걸어두었습니다. 현실은 OpenAPI를 사용해 어떤 클라이언트든 웹에서 데이터를 가져가도록 하느 경우가 많아졌고 하나의 클라이언트에서 여러 서버에 접속하여 다양한 데이터를 가져오는 경우도 많습니다.

 이 때문에 '데이터 제공 요청을 받은 웹 서버가 허용하면 다른 웹 서버로도 접속할 수 있다.'는 것을 CORS 표준으로 만들게 됩니다.

※ CORS(Cross-origin resource sharing)

교차 출처 리소스 공유(Cross-origin resource sharing, CORS), 교차 출처 자원 공유는 웹 페이지 상의 제한된 리소스를 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조이다.[1] 웹페이지는 교차 출처 이미지, 스타일시트, 스크립트, iframe, 동영상을 자유로이 임베드할 수 있다.[2] 특정한 도메인 간(cross-domain) 요청, 특히 Ajax 요청은 동일-출처 보안 정책에 의해 기본적으로 금지된다. CORS는 교차 출처 요청을 허용하는 것이 안전한지 아닌지를 판별하기 위해 브라우저와 서버가 상호 통신하는 하나의 방법을 정의한다.[3] 순수하게 동일한 츨처 요청보다 더 많은 자유와 기능을 허용하지만 단순히 모든 교차 출처 요청을 허용하는 것보다 더 안전하다. CORS의 사양은 원래 W3C 권고안으로 출판되었으나[4] 해당 문서는 구식(obsolete)인 상태이다.[5] 현재 CORS를 정의하면서 활발히 유지보수된 사양은 WHATWG의 Fetch Living Standard이다.[6] 출처 :  https://ko.wikipedia.org/

- 서버측

// Socket.IO 사용
var socketio = require('socket.io');

// cors 사용 - 클라이언트에서 ajax로 요청 시 CORS(다중 서버 접속) 지원
var cors = require('cors');

//클라이언트에서 ajax로 요청 시 CORS(다중 서버 접속) 지원
app.use(cors());

// 시작된 서버 객체를 리턴받도록 합니다. 
var server = http.createServer(app).listen(app.get('port'), function(){
	console.log('서버가 시작되었습니다. 포트 : ' + app.get('port'));

	// 데이터베이스 초기화
	database.init(app, config);
   
});

//===== Socket.IO를 이용한 채팅 테스트 부분 =====//

//socket.io 서버를 시작합니다.
var io = socketio.listen(server);
console.log('socket.io 요청을 받아들일 준비가 되었습니다.');

-> socket.io 모듈은 실행중인 웹서버 위에서 동작할 수 있도록 만들어져 있으므로 socket.io모듈에서 listen() 메소드를 호출하면서 웹서버 객체를 파라미터로 전달하면 그 다음부터 웹 소켓으로 들어오는 요청을 처리할 수 있습니다. http모듈로 실행한 익스프레스 서버는 server 변수에 저장되어 있으므로 그 아랫부분에서 socket.io모듈객체의 listen() 메소드를 호출합니다.

- socket.io로 요청을 처리하도록 설정하는 메소드

메소드 이름	설명
attach(httpServer, options)	웹 서버 인스턴스가 socket.io를 처리합니다.
listen(httpServer, options)	위의 attach()메소드와 같은 기능입니다.

- 서버 이벤트

// 클라이언트가 연결했을 때의 이벤트 처리
io.sockets.on('connection', function(socket) {
// io.on('connection', function(socket) {
...
}

---

- 스크립트

<script src="jquery-3.1.1.min.js"></script>     
<script src="/socket.io/socket.io.js"></script>
<!--https://cdnjs.com/libraries/socket.io/1.5.1-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.1/socket.io.min.js"></script>-->
<script>
	var socket = io();
</script>

<script src="semantic.min.js">
<script src="moment.min.js">
<script src="moment-with-locales.min.js">

-> <script src="/socket.io/socket.io.js"></script> 하면 socket.io 서버 가동시 자동으로 라이브러리를 생성하게 됩니다. (실제 파일 생성이 아닌 가상경로패치)

 1) CDN : https://cdnjs.com/libraries/socket.io

 2) npm install socket.io --save (현재 이 경우, 알아서 서버가 해줌)

 3) 직접 파일찾아서 복사해서 쓰기

---

-> moment란?

 - 공식사이트 : https://momentjs.com/

 - 자바스크립트에서는 날짜를 표시할때 Date 객체를 사용합니다. 이때, 특정 형태의 날짜를 나타내기 위해선 직접 함수를 개발해야합니다.

 - 또, 브라우저에 따라 시간대가 다를 경우 이를 고려하여 개발해야하는 번거러움이 있습니다.

 - Moment.js를 사용하면 이 두가지 문제를 해결할 수 있습니다.

 - 출처 : https://ithub.tistory.com/99

- 적용한 코드

function showClock(){
	var date = moment().format('YYYY-MM-DD HH:mm:ss');
	console.log("dete:"+date);
	return date;
}
........
var contents = "<li class='" + writer + "'>"
			 + "  <div class='avatar'>"
			 + "    <img src='" + img + "' />"
			 + "  </div>"
			 + "  <div class='messages'>"
			 + "    <p>" + sender + "\></p>"
			 + "    <p>" + msg + "</p>"
			 + "    <time datetime=\""+showClock()+"\"\>"+showClock()+"</time>"
			 + "  </div>"
			 + "</li>";

println("추가할 HTML : " + contents);
$(".discussion").prepend(contents);
.......

---

- client.html

- 클라이언트에서 서버에게 메세지 보내기

- Jquery를 이용한 버튼구현

<script/>
	var host;
	var port;
	var socket;

	// 문서 로딩 후 실행됨
	$(function() {

		// 연결하기 버튼 클릭 처리
		$("#connectButton").bind('click', function(event) {
			println('connectButton이 클릭되었습니다.');
			host = $('#hostInput').val();
                	port = $('#portInput').val();
			connectToServer();
		});

		// 전송 버튼 클릭 시 처리
		$("#sendButton").bind('click', function(event) {
		var sender = $('#senderInput').val();
		var recepient = $('#recepientInput').val();
		var data = $('#dataInput').val();
		var output = {sender:sender, recepient:recepient, command:'chat', type:'text', data:data};
		console.log('서버로 보낼 데이터 : ' + JSON.stringify(output));
		if (socket == undefined) {
			alert('서버에 연결되어 있지 않습니다. 먼저 서버에 연결하세요.');
			return;
		}
		socket.emit('message', output);
		addToDiscussion('self', data, output.sender);
		});

		// 로그인 버튼 클릭 시 처리
		$("#loginButton").bind('click', function(event) {
			var id = $('#idInput').val();
			var password = $('#passwordInput').val();
			var alias = $('#aliasInput').val();
			var today = $('#todayInput').val();
			var output = {id:id, password:password, alias:alias, today:today};
			console.log('서버로 보낼 데이터 : ' + JSON.stringify(output));
			if (socket == undefined) {
				alert('서버에 연결되어 있지 않습니다. 먼저 서버에 연결하세요.');
				return;
			}
			$("#senderInput").val(id);
			socket.emit('login', output);
		});

		// 결과 지우기 버튼 클릭 시 처리
		$("#clearButton").bind('click', function(event) {
		$("#result").html('');
	});
});
.......
// 서버에 연결하는 함수 정의
function connectToServer() {
	var options = {'forceNew':true};
	var url = 'http://' + host + ':' + port;
	socket = io.connect(url, options);

	socket.on('connect', function() {
		println('웹소켓 서버에 연결되었습니다. : ' + url);

		socket.on('message', function(message) {
			console.log(JSON.stringify(message));
			println('<p>수신 메시지 : ' + message.sender + ', ' + message.recepient + ', ' + message.command + ', ' + message.data + '</p>');
			addToDiscussion('other', message.data, message.sender);
		});

		socket.on('response', function(response) {
			console.log(JSON.stringify(response));
			println('응답 메시지를 받았습니다. : ' + response.command + ', ' + response.code + ', ' + response.message);
		});
	});

	socket.on('disconnect', function() {
		println('웹소켓 연결이 종료되었습니다.');
	});
}
<script/>

- $(function() { .. }); 이 구문은 Jquery에서 문서가 로딩된 후 스크립트 함수가 자동으로 동작 되는 함수입니다.

- jQuery 이벤트를 다른 함수로 연결(bind)해주는 함수

 $(...).bind('이벤트', function(...){....});

※ jQuery 이벤트 - blur, change , click, dblclick, error, focus, focusin, focusout, keydown, keypress, keyup, load, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, resize, scroll, select, submit, unload

자바스크립트 이벤트 - onmousedown

- 송수신 이벤트 처리 메소드

송수신 이벤트 처리 메소드	설명
on(event, callback)	이벤트 수신 형태로 메시지를 수신했을 때 처리할 콜백 함수를 등록합니다. 콜백 함수의 파라미터로 수신한 객체가 전달됩니다.
emit(event, object)	이벤트 송신 형태로 메시지를 송신합니다.

새로 정의한 message 객체의 속성들

- 서버에서 클라이언트에게 보내는 메세지를 전송하는 두 가지 방식

메소드 이름	설명
io.sockets.emit(event, object)	나를 포함한 모든 클라이언트에 전송합니다.
socket.broadcast.emit(event, object)	나를 제외한 모든 클라이언트에 전송합니다.

---

- message_css : https://css-tricks.com/replicating-google-hangouts-chat/

- 여기에서는 이미지와 datetime이 고정되어있습니다.

- datetime은 위에 있는 moment로 해결

- 이미지는 1개가 아닌 카카오톡 프로필 사진처럼 10개의 사진으로 돌려쓰기 (단, 같은 유저는 같은 프로피일것)

var imgs = ['/public/images/kakao_1.jpg', '/public/images/kakao_2.jpg',
			'/public/images/kakao_3.jpg', '/public/images/kakao_4.jpg',
			'/public/images/kakao_5.jpg', '/public/images/kakao_6.jpg',
			'/public/images/kakao_7.jpg', '/public/images/kakao_8.jpg',
			'/public/images/kakao_9.jpg', '/public/images/kakao_10.jpg'];
var sockeetimgs=[];

.....
var output = {sender:sender, recepient:recepient, command:'chat', type:'text', data:data};
console.log('서버로 보낼 데이터 : ' + JSON.stringify(output));

if (socket == undefined) {
	alert('서버에 연결되어 있지 않습니다. 먼저 서버에 연결하세요.');
	return;
}

socket.emit('message', output);

addToDiscussion('self', data, output.sender);
.....
socket.on('message', function(message) {
	console.log(JSON.stringify(message));

	println('<p>수신 메시지 : ' + message.sender + ', ' + message.recepient + ', ' + message.command + ', ' + message.data + '</p>');
	
	addToDiscussion('other', message.data, message.sender);
});
.....
function addToDiscussion(writer, msg, sender) {
	println("addToDiscussion 호출됨 : " + writer + ", " + msg);
	// 기본이미지
	var img = imgs[0];
	if (writer == 'other') {
		let res = sockeetimgs.find(x => x.sender == sender);
		if(res == undefined) {
			let cnt = sockeetimgs.length + 1;
			if(cnt > 9){
				cnt = cnt - 9;
			}
			sockeetimgs.push({sender:sender, img:cnt});
			img = imgs[cnt];
		} else{
			img = imgs[res.img];
		}
	}

	var contents = "<li class='" + writer + "'>"
				 + "  <div class='avatar'>"
				 + "    <img src='" + img + "' />"
				 + "  </div>"
				 + "  <div class='messages'>"
				 + "    <p>" + sender + "\></p>"
				 + "    <p>" + msg + "</p>"
				 + "    <time datetime=\""+showClock()+"\"\>"+showClock()+"</time>"
				 + "  </div>"
				 + "</li>";
	
	println("추가할 HTML : " + contents);
	$(".discussion").prepend(contents);
}
.....

---

연습하다가 에러뜬 내용)

C:\NodeJS_Book\brackets-nodejs\LatestExample>node app5.js 뷰 엔진이 ejs로 설정되었습니다. config.server_port : 7001 route_loader.init 호출됨. 설정에 정의된 라우팅 모듈의 수 : 0 config/passport 호출됨. 5가지 passport 인증방식 설정됨. user_passport 호출됨. socket.io 요청을 받아들일 준비가 되었습니다. 서버가 시작되었습니다. 포트 : 7001 init() 호출됨. connect() 호출됨. WARNING: The `useMongoClient` option is no longer necessary in mongoose 5.x, please remove it.     at handleUseMongoClient (C:\NodeJS_Book\brackets-nodejs\LatestExample\node_modules\mongoose\lib\connection.js:610:17)     at NativeConnection.Connection.openUri (C:\NodeJS_Book\brackets-nodejs\LatestExample\node_mod ules\mongoose\lib\connection.js:480:7)     at Mongoose.connect (C:\NodeJS_Book\brackets-nodejs\LatestExample\node_modules\mongoose\lib\index.js:271:15)     at connect (C:\NodeJS_Book\brackets-nodejs\LatestExample\database\database.js:28:11)     at Object.database.init (C:\NodeJS_Book\brackets-nodejs\LatestExample\database\database.js:19:2)     at Server.<anonymous> (C:\NodeJS_Book\brackets-nodejs\LatestExample\app5.js:160:11)     at Object.onceWrapper (events.js:313:30)     at emitNone (events.js:111:20)     at Server.emit (events.js:208:7)     at emitListeningNT (net.js:1378:10)     at _combinedTickCallback (internal/process/next_tick.js:135:11)     at process._tickCallback (internal/process/next_tick.js:180:9)     at Function.Module.runMain (module.js:686:11)     at startup (bootstrap_node.js:187:16)     at bootstrap_node.js:608:3 (node:5600) DeprecationWarning: current URL string parser is deprecated, and will be removed in a future version. To use the new parser, pass option { useNewUrlParser: true } to MongoClient.connect. 데이터베이스에 연결되었습니다. : mongodb://localhost:27017/local 설정에 정의된 스키마의 수 : 1 UserSchema 정의함.

원인 :  "mongoose": "5.4.9" 버전차이 mongoose.connect(config.db_url, { useNewUrlParser: true }); mongoose.set ( 'useCreateIndex', true);

---

추천사이트)

- socket.io Server API : https://socket.io/docs/server-api/#socket-on-eventName-callback

- socket.io Client API : https://socket.io/docs/client-api/

- socket.io : https://poiemaweb.com/nodejs-socketio

- socket.io : https://nesoy.github.io/articles/2017-04/Socket.io

- socket.io chating example : https://github.com/socketio/chat-example

- 타임존 관련 추가 자료 : https://meetup.toast.com/posts/130

- css readonly : https://www.w3schools.com/cssref/sel_read-only.asp