WebSocket /WebRTC 모음 (작성중)

babel
package.json
script 생성
exress nodejs
실시간 채팅
http vs ws
bi-directional(한 번 연결로 양방향) 브라우저-백엔드/ 백엔드-백엔드프로토콜

ws- npm

https://www.npmjs.com/package/ws

websocket - mdn

https://developer.mozilla.org/ko/docs/Web/API/WebSocket

오류
const socket = new WebSocket(`wss://${window.location.host}`);
wss를 ws로 ...ㅇㅅㅇ

object 를 문자로 전달하는 방법
JSON.stiringify() => back-end에서 parse 해서 처리

스트링으로 보내는 이유는?? https://velog.io/@wabbang/json

socketIO

https://socket.io/

socketIO

server

import { Server } from "socket.io";

const io = new Server(3000);

io.on("connection", (socket) => {
  // send a message to the client
  socket.emit("hello from server", 1, "2", { 3: Buffer.from([4]) });

  // receive a message from the client
  socket.on("hello from client", (...args) => {
    // ...
  });
});

client

import { io } from "socket.io-client";

const socket = io("ws://localhost:3000");

// send a message to the server
socket.emit("hello from client", 5, "6", { 7: Uint8Array.from([8]) });

// receive a message from the server
socket.on("hello from server", (...args) => {
  // ...
});

mediaDevices.getUserMedia

https://developer.mozilla.org/ko/docs/Web/API/MediaDevices/getUserMedia

async function getMedia(constraints) {
  let stream = null;

  try {
    stream = await navigator.mediaDevices.getUserMedia(constraints);
    /* 스트림 사용 */
  } catch(err) {
    /* 오류 처리 */
  }
}

constraints => 가져오고 싶은 값?!

https://developer.mozilla.org/ko/docs/Web/API/MediaDevices

모바일 장치의 전면 카메라를 요청하기 위한 코드:

{ audio: true, video: { facingMode: "user" } }

모바일 장치의 후면 카메라를 요청하기 위한 코드:

{ audio: true, video: { facingMode: { exact: "environment" } } }

WebRTC

web real Time Communication =>실시간 커뮤니케이션

peer to peer => 영상과 오디오가 서버를 거치지 않고 전달(웹소켓은 서버O) 영상.오디오 직접
but 브라우저에게 다른 브라우저의 위치를 알려주는 서버는 필요