기본 콘텐츠로 건너뛰기

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

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

- Websocket 호환성 확인

Web Sockets - LS Bidirectional communication technology for web apps

Usage % of all users all tracked tracked desktop tracked mobile Global 91.92% + 0.21% = 92.13%

unprefixed: 91.92% + 0.17% = 92.09%

Current aligned Usage relative Date relative Apply filters Show all ?

IE 6 - 9 10 11 Edge* 12 - 17 18 Firefox 2 - 3.6 4 - 5 See notes: 1 6 - 10 See notes: 2 11 - 64 65 66 - 67 Chrome 4 - 14 See notes: 1 15 See notes: 2 16 - 71 72 73 - 75 Safari 3.1 - 4 5 - 5.1 See notes: 1 6 - 6.1 See notes: 2 7 - 11.1 12 TP Opera 10.1 11.5 See notes: 1 12.1 - 56 57 iOS Safari* 3.2 - 4.1 4.2 - 5.1 See notes: 1 6 - 11.4 12.1 Opera Mini* all Android Browser* 2.1 - 4.3 4.4 - 4.4.4 67 Blackberry Browser 7 See notes: 1 10 Opera Mobile* 12 See notes: 1 12.1 46 Chrome for Android 71 Firefox for Android 64 IE Mobile 10 11 UC Browser for Android 11.8 Samsung Internet 4 - 7.4 8.2 QQ Browser 1.2 Baidu Browser 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 users all tracked tracked desktop tracked mobile Global 91.92% + 0.21% = 92.13%

unprefixed: 91.92% + 0.17% = 92.09%

Current aligned Usage relative Date relative Apply filters Show all ?

IE 6 - 9 11 Edge* 12 - 17 Firefox 11 - 64 65 Chrome 16 - 71 72 Safari 7 - 11.1 12 Opera 12.1 - 56 57 iOS Safari* 6 - 11.4 12.1 Opera Mini* all Android Browser* 2.1 - 4.3 4.4 - 4.4.4 Blackberry Browser Opera Mobile* Chrome for Android 71 Firefox for Android 64 IE Mobile 11 UC Browser for Android 11.8 Samsung Internet 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) { ... }

- 스크립트 var socket = io();

이 블로그의 인기 게시물

[Mac OS X] 데스크탑 응용프로그램 개발시작

[Mac OS X] 데스크탑 응용프로그램 개발시작 현재 회사에서 다음 프로젝트로 Mac OS X를 개발해야 하는 일정이 생겨 난생 처음 데스크탑 응용프로그램을 개발하기 공부를 시작했고 여러가지 플랫폼이 있다는것을 발견했다. 어떤 플랫폼을 사용해야할 지 먼저 고민해보자. 무엇으로 개발할것인가? Xcode & Swfit or Objective-C Mac OS X 는 objective-c를 기반으로 만들어졌다. apple에서 제공하는 Xcode와 objective-c 혹은 Swift로 응용 프로그램을 만들 수 있다. Electron Electron 프레임워크를 사용하면 javascript, HTML, CSS를 사용하여 크로스 플랫폼 데스크탑 응용 프로그램을 만들 수 있다. react-native-desktop Qt 프레임 워크를 기반으로하는 크로스 플랫폼이다. react-native 와 javascript로 응용 프로그램을 만들 수 있다. Qt는 컴퓨터 프로그래밍에서 GUI 프로그램 개발에 널리 쓰이는 크로스 플랫폼 프레임워크. 각 플랫폼의 장단점은 무엇인가? Xcode & Swfit or Objective-C - 장점 모든 OSX API에 직접 접근할 수 있다. Xcode를 통해 App Store에 쉽게 배포할 수 있다. - 단점 Windows 전용 응용 프로그램을 다시 개발해야한다. Swift언어를 모른다면 새로 공부해야 한다. Electron - 장점 웹스택을 가지고 빠르게 만들 수 있다. 다양한 플랫폼을 지원한다. - 단점 Native언어로 개발할때 보다 성능이 떨어질 이슈가있다. OS X API를 사용하는데 복잡하다. *API에 대한 JavaScript 래퍼가 없으면 자체 래퍼를 작성하지 않는 한 프로젝트에서 사용할 수 없습니다. React-native-desktop - 장점 현재 개발스택과 완전히 동일하므로 더 빠르게 개발 할 수 있다. 다양한 플랫폼을 지원한다. - 단점 N...
댓글 쓰기
자세한 내용 보기

AWS CI/CD 파이프라인에 Slack 알람 적용(Lambda, CloudWatch Events 연동)

AWS CI/CD 파이프라인에 Slack 알람 적용(Lambda, CloudWatch Events 연동) 이번 글에서는 구축된 CI/CD 파이프라인과 Slack 알람을 연동하는 방법에 대해서 알아볼 것이다. CI/CD 파이프라인 시작/종료(성공/실패) 시 Amazon CloudWatch Events에서 해당 이벤트를 감지한 후 AWS Lambda로 트리거 신호를 보내면 AWS Lambda에서 Slack채널로 알람을 보내는 프로세스다. 글의 순서는 다음과 같다. Amazon CloudWatch Events, AWS Lambda란? 실습 전 준비사항 Slack Webhook 생성 AWS Lambda 함수 생성 AWS CloudWatch Events 생성 테스트 위와 같은 방식으로 구축을 하면 최종 프로세스는 다음 그림과 같다 (우리가 이 글에서 진행하는 내용은 빨간색으로 표시된 부분) 1. Amazon CloudWatch Events, AWS Lambda란? 1-1. Amazon CloudWatch Events란? Amazon CloudWatch Event(혹은 AWS CloudWatch Events)는 AWS 상태 변경 등을 감시할 수 있는 기능이다. 만약 사용자가 만든 규칙에 맞는 이벤트가 발생하게 되면 해당 이벤트가 사정에 정의된 규칙과 일치할 경우 하나 이상의 대상 작업을 호출한다. 이벤트 유형에 따라 알람을 보내거나, 이벤트 정보를 캡쳐하거나, 교정작업을 수행하거나, 이벤트를 시작하거나, 기타 작업을 수행할 수 있다. 이벤트가 발생할 경우 대상 작업은 AWS Lambda함수, AWS Kinesis 스트림, AWS SQS, Amazon SNS 등이 있다. 사용되는 사례로는 1) 이벤트가 발생하면 Lambda함수를 사용하여 Slack채널로 알림을 전달하거나, 2) AWS 상태 이벤트가 발생하면 Lambda 및 CloudWatch Events를 사용하여 Amazon SNS로 사용자 지정 텍스트 또는 SMS 알림을 보내는 등...
댓글 쓰기
자세한 내용 보기

[2020-angstromCTF] web - A peculiar query write-up

[2020-angstromCTF] web - A peculiar query write-up English write-up UI seems like below. If you click the 'the source' link, you can get back-end source code. const express = require("express"); const rateLimit = require("express-rate-limit"); const app = express(); const { Pool, Client } = require("pg"); const port = process.env.PORT || 9090; const path = require("path"); const client = new Client({ user: process.env.DBUSER, host: process.env.DBHOST, database: process.env.DBNAME, password: process.env.DBPASS, port: process.env.DBPORT }); async function query(q) { const ret = await client.query(`SELECT name FROM Criminals WHERE name ILIKE '${q}%';`); return ret; } app.set("view engine", "ejs"); app.use(express.static("public")); app.get("/src", (req, res) => { res.sendFile(path.join(__dirname, "index.js")); }); app.get("/", async (req, res) => { if (req.query...
댓글 쓰기
자세한 내용 보기