// websocket으로 데이터 받아오기
const socket = io('ws://localhost:3000');
io.on('connection', (socket) => {
console.log('a user connected');
});
나를 괴롭혔던 몇 가지의 문제들이 있었다.
1. Port 처리 2. CORS (Access-Control-Allow-Origin) 에러 3. REST API
첫째로 포트 문제였다.
공인 아이피로 접속해야하는데 자꾸 접속이 안됐었다. 서버를 돌려도 안되었고, 등등.. 원인은 포트포워딩이었다. 과거에 서버를 설치하는데 내가 직접 건들지 않았던 부분이었기 때문에 신경 자체를 쓰지 못했다.
내 능력부족일 뿐,, ㅠㅠ
그리고 이번 기회로 네트워크 단의 공부를 잘 하게 되었다. 어떤 식으로 흘러가는지 대충 알았던 모습을 그림도 그려가면서 공부하며 이해를 할 수 있었다. ㅂㄷㅂㄷ.. 시간 잡아먹은거 생각하면 치가 떨림.
두 번째로 CORS 에러.
프론트엔드 개발자들이 가장 자주 보고 친숙한 에러 중의 하나라고 하는데, 이해가 된다. 걸핏하면 CORS에러에요~ 뿌잉뿌잉하면서 빨간 글씨로 나타나는 녀석이다.
서버에서 분명히 아래와 같이 주었는데도, 계속 에러나고 ㅋㅋㅋ 열받아 죽겠다.
cors: { origin: "*" }
ORIGIN * 는 함부로 주면 안된다.
그래도 어느정도 해결해서 다행이다. 전체적인 프로세스도 잘 알았고, 역시 부딪히는만큼 알게 되는 법
마지막으로 REST API 이다.
그래도 위의 두 녀석보다는 훨씬 애를 덜 먹였다. 왜냐하면 기존에도 자주 사용하는 방식이었기 때문. RESTFUL API 환경구성을 하기 위해 프론트와 백을 일부로 구분하여 사용하였다.
기존에는 Legacy였기 때문에 코드를 직접 보기 너무나도 끔찍하여 토할 것 같았으나, PHP를 백으로 놓고 데이터만 내뱉게 만들어놓고, Javascript로 나머지를 충당했다. 쓴 라이브러리 등은 ajax를 처음에는 사용하였으나, vue.js를 공부하면서 axios에 대해 알게되었고, 이제는 axios위주로 사용한다. axios에 대해서는 과거에 작성한 내용을 참고 바랍니다.
지난 3주동안 업무 중에 웹소켓 구현에 대해 공부하고, 해당 내용을 구현할 방법을 구상하였다.
■ 서버를 통한 외부 접속 방식
- 데이터가 인터넷을 통해 서버로 송출, - 서버에서 (외부 접속을 통해) 데이터를 수신하고, 로직을 처리. - 데이터베이스 저장(할 필요가 없는데도). - 서버에서 웹소켓을 통해 데이터 송출 - 키오스크에서 데이터 수신
이렇게 진행하려고 하였다.
■ 에러 사항
1. 웹소켓에 대한 지식이 전무.
2. 실제 예제 연습 중에 윈도우에서는 처리가 되었지만, 리눅스 서버에서 예제를 똑같이 구현해도 같은 결과가 발생하지 않음
→ 리눅스(Ubuntu)에서 Apache 웹 서버를 띄운 상태에서의 추가적인 제약사항. (해결완료) → 외부접속을 통해 처리해야하는데 내부접속을 할 수 밖에 없었던 점. (해결못함)
■ 방향의 전환
- 아마 소장님께서 지나가듯이 말씀하셨었다. '만약 구현이 제대로 안되는 것 같으면 그냥 윈도우에서 돌리면 어때? 어차피 윈도우 통해서 데이터 받아들이니까.' 이 말씀을 그때는 정신이 팔려서 잘 안들렸지만, 혼자 끙끙대면서 구현해보고, 구상하다보니 마침내 도달한 결론이 되었다... 머쓱.
그래서 기존에는 그림과 같이 카메라→NUC→서버→NUC→키오스크 였는데, 카메라→NUC→키오스크로 변경하려고 한다. (실제로는 아직 안해봄) 구현 가능성이 넘쳐보이니 일단 시도하려고 한다.
