통신3 [220317] websocket (웹소켓) 구현하기 / 채팅창 만들기 목록 1. websocket 사용환경 만들기 2. 요청/응답 코드 작성하기 3. websocket의 이벤트 4. string 형식으로 데이터를 주고받는 websocket 5. 채팅창 완성하기 외부 라이브러리 ws 설치하기 $npm install ws 라이브러리 가져와서 세팅하기 const webSocket = require('ws') 백엔드에서 요청을 받아주는 코드 작성하기 handshake를 만들고 Connection을 이루는곳까지 코드로 구현했다. //socket.js const webSocket = require('ws') module.exports = (server) =>{ // 클래스 문법이니까 new로 선언 const wss = new webSocket.Server({server}) //응답이.. 2022. 3. 18. [220307] 서로 다른 서버끼리 통신하기(CORS, Access-Control-Allow시리즈) 브라우저의 보안을 지켜주는 동일 출처 정책 SOP 기본적으로는 다른 서버끼리는 서로 통신하지 못한다. 4001번 포트로 연결되어있는 서버에서 3001포트로 연결하려고하면 에러가 뜬다. 같은 출처끼리만 리소스 공유나 접근을 허용해주는 동일 출처 정책 때문이다. //localhost:4001에 연결되어있는 서버 const btn = document.querySelector('#btn') btn.addEventListener('click',async ()=>{ alert('버튼클릭') let response = await axios.get('http://localhost:3001') console.log(response.data) }) 출처(Origin)란? http://127.0.0.1:5500/index... 2022. 3. 14. [220304] AJAX를 응용해서 입력값 받아오기 [목록] 1. ajax를 사용하여 로그인 정보 받아오기 2. 비동기통신 코드 만들기 3. 비동기통신으로 받아온 값을 출력하기 1. submit버튼을 누를때 form이 시작되지 않게 만들고 싶음. = submit을 누를때 액션값으로 이동이 안되게 하고싶음 = 이 곳에서 submit이나 form을 조작할 수 있어야 가능함. = 코드를 언제 실행시킬지 시점을 잡을 수 있어야함. //DomContentLoaded : body영역까지 html 렌더링이 끝난 후에 init이 실행됨. document.addListener('DomContentLoaded',init) function init(){ } 1.1 DomcontentLoaded 이벤트 작성 1.2 form 가져오기 or 조작할 수 있는 환경 만들기 1.3 d.. 2022. 3. 4. 이전 1 다음
