Real-time web Tec List

You can find a comprehensive and updated list of real-time solutions that can be considered alternatives to pusher in this Real-Time Web Technologies Guide.

Hosted

• Ably: https://www.ably.io (완전 편리함!!)
• Fanout: http://fanout.io/
• Firebase https://www.firebase.com
• Gamooga: http://www.gamooga.com/
• Google App Engine with Channels API: http://code.google.com/appengine…
• Google Drive Real Time: https://developers.google.com/dr…
• Hydna: https://www.hydna.com/
• ScaleDrone https://www.scaledrone.com
• Baasil https://baasil.io
• PubNub: http://pubnub.com
• Reappt: Data-Efficient Realtime Messaging
• Simperium: Simperium
• Tambur: https://www.tambur.io/
• WebSync on-demand: http://www.frozenmountain.com/we…
• Xtremepush: Xtremepush - Mobile Marketing Automation Software

Self Hosted

• http://github.com/Atmosphere : http://async-io.org/
• http://faye.jcoglan.com/
• http://firehose.io/
• Jetty: http://blogs.webtide.com/gregw/e…
• Kaazing: http://kaazing.com/
• Lightstreamer: http://lightstreamer.com
• Diffusion - http://www.pushtechnology.com
• http://pusheo.com
• http://code.google.com/p/pywebso…
• Ruby EventMachine WebSocket server: https://github.com/igrigorik/em-…
• SignalR (.NET) https://github.com/SignalR/SignalR
• Slanger. Open source reimplementation of Pusher. Compatible with Pusher libraries: https://github.com/stevegraham/s…
• http://socky.org/
• http://socket.io/
• http://sockjs.org/
• http://socketcluster.io/
• Thunderpush: https://github.com/thunderpush/t…
• https://www.meteor.com/

Pushpin

• MigratoryData: http://migratorydata.com

Reference

• Quora

Short-circuit evaluation이란

and, or논리 연산에서 인자 하나만 보고 결과를 확실히 알 수 있을 때, 뒤에 나오는 인자를 확인하지 않고 바로 답을 내는 방법이다. && 연산일 때, 하나라도 false이면 무조건 답이 false이고 || 연산일 땐, 하나라도 true이면 무조건 답이 true이다.

지원하는 언어는 여기

예를 보면 다음과 같다.

조건식 1 && 조건식 2
조건식 1 이 false 이면, 조건식 2 를 건너뜀

설명

&&연산자에서는 두 조건식이 모두 true가 되어야 전체 결과가 true가 되는데, 조건식1이 false가되면 조건식2을 보지 않아도 전체가 false가 되므로 조건식2를 체크하지 않는다.

적용한 예

if (check1 == '' && check2 == null){
	blabla
}

위 경우에서 ''을 먼저 체크하는 것보다 null인 경우를 먼저 체크하는 것이 안전하다고 한다.

수정하면 아래와 같다.

if (check2 == null && check1 == ''){
	blabla
}

JQuery 노드찾기

1. 노드 찾기

• 태그 이름으로 노드 찾기 : $(“태그이름”), $(“선택자”)

• 클래스 이름으로 노드 찾기 : $(“.클래스이름”)

• ID로 노드 찾기 : $(“선택자”)

• 속성으로 노드 찾기 : $(“[속성이름=값]”)

• 찾은 요소 개수 구하기 : .size() , .length

• 찾은 요소 n번째 접근하기 : .eq(index) , .each(function(index){});

• 찾은 요소에서 특정요소만을 걸러내기 : .filter(“선택자”)

• 찾은 요소에서 특정 자식요소만 찾기 : .find(“선택자”)

1. 자식 노드 찾기

• 전체 자식 노드 찾기

  - 텍스트 노드 포함 전체 자식 노드 찾기 : $(“선택자”).contents() - 텍스트 노드 제외한 전체 자식 노드 찾기 : $(“선택자”).children(“선택자”)

• n번째 자식 노드 접근

  - $(“선택자”).children().eq(N) - $(“선택자”).children(“:eq(N)”)

• 첫번째 자식 노드 접근

  - $(“선택자”).children().first() - $(“선택자”).children(“:first”)

  	- $("선택자").children().eq(0)
  

  - $(“선택자”).children(“:eq(0)”)

• 마지막 자식 노드 접근

  - $(“선택자”).children().last() - $(“선택자”).children(“:last”)

1. 부모 노드 찾기

• 바로 위의 부모 : $(“선택자”).parent()

• 모든 부모 찾기

  - $(“선택자”).parents() 모든 부모

• 모든 부모 중 선택자에 해당하는 부모 찾기

  - $(“선택자”).parents(“선택자”)

1. 형제 노드 찾기

• 이전 형제 노드 찾기

  - $(“선택자”).prev() - $(“선택자”).prevAll(“선택자”);

• 다음 형제 노드 찾기

  - $(“선택자”).next() - $(“선택자”).nextAll(“선택자”);

1. 노드 생성,추가,이동,삭제

• 생성

  - $(“노드”) - $(“선택자”).html(“<노드>...") - $(“노드”).clone()

• 추가

  • $기준노드.append($추가노드)

  • $추가노드.appendTo($기준노드)

  • $기준노드.prepend($추가노드)

  • $추가노드.prependTo($기준노드)

    • $추가노드.insertBefore($기준노드)

  • $기준노드.before($추가노드)

  • $추가노드.insertAfter($기준노드)

  • $기준노드.after($추가노드)

• 삭제

  – $(“선택자”).remove()

• 이동

  • $기준노드.append($이동노드)

  • $이동노드.appendTo($기준노드)

  • $이동노드.insertBefore($기준노드)

  • $기준노드.before($이동노드)

    • $이동노드.insertAfter($기준노드)

  • $기준노드.after($이동노드)

1. 텍스트 노드 다루기

• 텍스트 노드 생성 : $(“텍스트”)

• 텍스트 노드 추가 : $기준노드.append(“텍스트”)

• 텍스트 노드 변경 : $기준노드.text(“새로운 텍스트”)

<table id = "table1"> ---</table>
<table id = "table2"> ---</table>
<table id = "table3"> ---</table>
<table id = "table4"> 
	<tr>---</tr>
	<tr>
		<td>asd<td>
		<td><input class="inputs"></td>
	</tr>
</table>

위와 같은 환경이 있고 #table4는 파일을 추가 할때마다 tr이 추가되는 상황이라고 하자!

(추가 될때는 모든 속성이 같다.)

이때 가장 마지막에 생성된 #inputs에 접근할려면…

$('#table4 tr:last .inputs').val();

이런 식으로 :last선택자를 사용하면 된다.

Reference

• jqueryDoc

들어가기 전에

정규식은 문자열에서 문자 조합에 일치 시키기 위해 사용되는 패턴이다.

자바스크립트에서, 정규식은 객체이다.

이 패턴들은 RegExp의 exec메소드와 test 메소드 그리고 String의 match메소드, replace메소드, search메소드, split메소드와 함께 쓰인다.

정규식 만들기

정규식은 두가지 방법으로 만들 수 있다.

var re = /abc+d/;

정규식 리터럴은 스크립트가 로드될때 정규식의 컴파일이 작동한다. 정규식이 계속 사용될 때는 위와 같은 형식으로 사용하는 것이 좋다.

또다른 방법은 RegExp객체의 생성자 함수를 호출하는 것이다.

var re = new RegExp("abc+d");

생성자 함수를 사용하면 정규식의 런타임 컴파일을 제공한다.

정규식 패턴 작성하기

단순한 패턴 사용하기

단순한 패턴은 찾고자하는 문자들로 구성된다. 예를 들어 /abc/라는 패턴은 문자열에서 정확히 ‘abc’라는 문자들이 모두 함께 순서대로 나타나야지 일치한다.

특수 문자를 사용하기

단순 패턴보다 더 복잡한 경우 특수문자를 사용하여 패턴을 만든다.

정규식 사용하기

JavaScript에서 정규식에서 쓰이는 메소드

Reference

• MDN

HTTP 접근 제어 (CORS)

Cross Origin Resource Sharing(CORS)

HTTP요청은 기본적으로 Cross-Site-HTTP Requests가 가능하다.

다시말하면, <img>, <link>, <script>태그로 다른 도메인의 리소스를 가져오는 것이 가능하다.

그런데!

스크립트에서 생성된 Cross-Site HTTP Requests는 Same Origin Policy를 적용 받기 때문에 Cross-Site HTTP Requests가 불가능하다.

ajax가 많이 사용되면서 스크립트에서 생성되는 XMLHttpRequest에 대해서도 Cross-Site HTTP Requests가 가능해야 한다는 요구가 많이 나왔고 W3C에서 CORS라는 이름의 권고안이 나왔다.

CORS 요청의 종류

• Simple
• Preflight
• Credential
• Non-Credential

브라우저가 요청 내용을 분석하여 4가지 방식 중 해당하는 방식으로 서버에 요청을 날린다.

실무에서..

얼마전 이미지의 다른 도메인에서 불러와서 켄버스에 그려 이미지의 픽셀값을 가져오는 일이 있었다.

이런 에러가 발생하였다.

처음에는 이미지 CORS 속성을 anonymous로 지정을 했다.

img.crossOrigin = "anonymous";

그래도 계속되었다.

이미지가 저장되어 있는 서버에서 이미지를 보내줄 때 헤더에 crossOrigin내용을 첨부해서 보내주면 되지만, 현실적으로 불가능해 클라이언트 측에서 처리하기로 했고 아래와 같이 이미지를 DOM스토리지에 저장하고 DOM스토리지에서 이미지를 불러오는 방식으로 문제를 해결 했다.

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>

var img = new Image,
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    src = "http://example.com/image"; // insert image url here

img.crossOrigin = "Anonymous";

img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage( img, 0, 0 );
    localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
}
img.src = src;
// make sure the load event fires for cached images too
if ( img.complete || img.complete === undefined ) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
}

Browser compatibility