웹서비스 구상중
클라이언트가 PC DEVICE 인지 MOBILE 인지
확인해야할 필요가 있다.
1.서버는 NODEJS + EXPRESS 이용하여 구성하고
2. 클라이언트는 자바스크립트 (REACT 리액트, 상관없음)
클라이언트에서 브라우저 정보를 보내주면 되는것인데
HEADER 에 AGENT 정보가 같이오기때문에 판별하기는 어렵지 않다.
별도의 API등을 이용하지 않고 구성해볼 수 있다.
이왕 웹소켓을 이용하니 웹소켓에 딸려오는 정보로도 알 수 있을것같다.
// 웹 소켓 연결 생성
var socket = new WebSocket('ws://서버주소');
// 연결이 설정된 후 실행될 이벤트 핸들러
socket.onopen = function() {
// 브라우저 정보를 추출하는 코드
var browserInfo = {
userAgent: navigator.userAgent,
language: navigator.language,
screenWidth: window.screen.width,
screenHeight: window.screen.height
// 필요한 정보를 추가로 포함시킬 수 있습니다.
};
// 브라우저 정보를 JSON 형식으로 변환하여 서버로 전송
socket.send(JSON.stringify(browserInfo));
};
// 서버로부터 메시지를 수신했을 때 실행될 이벤트 핸들러
socket.onmessage = function(event) {
var messageFromServer = event.data;
// 서버로부터 전달받은 메시지를 처리하는 코드
};
// 연결이 종료되었을 때 실행될 이벤트 핸들러
socket.onclose = function(event) {
// 연결 종료 처리를 수행하는 코드
};
웹소켓을 이용하여 바로연결도 가능하며
SOCKET.IO-CLIENT 를 이용해서도 구성할 수 있다
import React, { useEffect } from 'react';
import io from 'socket.io-client';
const WebSocketComponent = () => {
useEffect(() => {
// 웹 소켓 연결 생성
const socket = io('서버주소');
// 연결이 설정된 후 실행될 이벤트 핸들러
socket.on('connect', () => {
// 브라우저 정보를 추출하는 코드
const browserInfo = {
userAgent: navigator.userAgent,
language: navigator.language,
screenWidth: window.screen.width,
screenHeight: window.screen.height,
isMobile: /Mobile/.test(navigator.userAgent) // PC 또는 모바일 여부 확인
// 필요한 정보를 추가로 포함시킬 수 있습니다.
};
// 브라우저 정보를 서버로 전송
socket.emit('browserInfo', browserInfo);
});
// 서버로부터 메시지를 수신했을 때 실행될 이벤트 핸들러
socket.on('messageFromServer', (message) => {
// 서버로부터 전달받은 메시지를 처리하는 코드
});
// 컴포넌트 언마운트 시 웹 소켓 연결 종료
return () => {
socket.disconnect();
};
}, []);
return <div>WebSocket Component</div>;
};
export default WebSocketComponent;
사실 정보만 SOCKET.IO 를 통해
연결할 뿐 별다를건없다.
오히려 브라우저에서 브라우저 정보를 확인할 수 있는
userAgent: window.navigator.userAgent,
language: window.navigator.language,
screenWidth: window.screen.width,
screenHeight: window.screen.height,
정보가 더 유용할듯하다.
애초에 NODE JS의 EXPRESS 에서도 바로 알 수있는데
const express = require('express');
const app = express();
// user-agent 미들웨어 등록
app.use(function(req, res, next) {
req.userAgent = req.get('User-Agent');
next();
});
// 라우트 핸들러에서 클라이언트 에이전트 정보 사용
app.get('/', function(req, res) {
const userAgent = req.userAgent;
const isMobile = /Mobile/.test(userAgent);
if (isMobile) {
// 모바일 디바이스 처리
res.send('Mobile device');
} else {
// PC 처리
res.send('PC device');
}
});
// 서버 시작
app.listen(3000, function() {
console.log('Server is running on port 3000');
});
이용시
PC로만 접속가능하거나 모바일로만 접속가능하거나 구성시
또는 서버에 클라이언트가 연결 된 후 판단하거나
두가지 용도로 분리해서 이용하면 유용할듯하다.