전체 글103 [자바스크립트] Node.js - 웹서버에 Websocket 통신 추가하기 안녕하세요? 어제는 Node.js와 express 모듈을 이용해 웹서버를 구현해보았습니다. 오늘은 웹서버-Client간의 통신 중 가장 빠르고 대표적인 Websocket통신을 구현하겠습니다. 기존 웹서버를 만드는건 https://ohcoach.tistory.com/14 를 참고해 주세요. 1. 프로젝트에 express-ws 추가하기 npm install express-ws 2. index.js에 express-ws 모듈 사용하기 //index.js let express = require("express"); let app = express(); let expressWS = require("express-ws")(app); //웹소켓모듈 추가 app.use(express.static('public')); .. 2021. 1. 23. [자바스크립트] Node.js - 웹서버 html 파일 랜더링하기 오늘은 Node.js를 이용해 웹서버를 만들고, 접속 시 지금까지 만든 예제를 화면에 보이도록 설정하겠습니다. Node.js 설치 및 기초 사용은 검색하면 잘 정리되어있는 자료들이 많으니, 참고해 주시기 바라며, 저는 완성 코드만 기록하겠습니다. 사실 블로그의 주 목적은 저 스스로 정리하기 위함이라 다른분들이 보시기에는 불친절할 수 있습니다... 나중에 고수가 되면 글도 잘 다듬고 내용도 보강하겠습니다. 1. 완성 코드 //index.js let express = require("express"); let app = express(); app.listen(3000, function(){ console.log("App is running on port 3000"); }); app.get("/", funct.. 2021. 1. 23. [자바스크립트] 화면 방향(가로/세로) 확인하기 어제는 접속환경(Mobile/PC)을 확인하는 코드를 알아보았습니다. 오늘은 화면의 방향을 확인하는 코드를 기록하겠습니다. 어제보다 더욱 간단한 코드로 스크린의 방향을 확인할 수 있습니다. 방향이 고정된 PC의 경우 window.orientation 의 값이 undefined로 나오게 됩니다. 이 코드를 참고해 , 의 크기를 수정하는 것은 다음과 같습니다. let w, h; if (window.orientation == 0) { w = 240; h = 320; } else { w = 320; h = 240; } video.width = w; video.height = h; canvas.width = w; canvas.height = h; * 이 글은 티스토리 카카오계정 연동정책으로 인해 이전 블로그(오코.. 2021. 1. 23. [자바스크립트] 접속환경(Mobile/PC) 확인하기 지금까지 글에서 모바일과 PC환경을 구분하지 않았기 때문에 오류가 있었습니다. 예를들면, 카메라 해상도가 320x240일 때 읽어오는 영상의 크기는 스마트폰을 세워서 보면 240x320 즉 세로가 크고 노트북이나 카메라가 달린 PC에서는 320x240으로 가로길이가 더 큽니다. 다음 코드는 접속환경이 모바일인지 PC인지 확인하는 코드입니다. 이를 이용해 기존 코드에 삽입해서 모바일 혹은 PC에 맞는 설정으로 변경할 수 있습니다. * 이 글은 티스토리 카카오계정 연동정책으로 인해 이전 블로그(오코취) 글을 옮겨왔습니다. [끝]. 2021. 1. 23. 이전 1 ··· 18 19 20 21 22 23 24 ··· 26 다음