실무에서 유용하게 쓰는 스크립트와 코드 조각을 블로그 게시판으로 저장하고 공유합니다.
총 108건의 글
내부망 프록시 도구 FRPS를 백그라운드에서 실행하는 방법이다. nohup ./frps -c frps.ini 명령을 실행해 프로세스를 백그라운드로 띄우고 로그를 /var/log/frp.log에 남긴다. 이후 ps aux | grep frp | grep -v grep 명령으로 FRPS 실행 상태를 확인한다.
后台运行FRPS
nohup ./frps -c frps.ini > /var/log/frp.log 2>&1 &
查看FRPS运行状态
ps -aux|grep frp| grep -v grep
Node.js의 ws 라이브러리로 WebSocket 서버를 만들고, HTML+JavaScript로 그룹 채팅방을 구현한 예제다. npm으로 ws를 설치하고 8080 포트에서 서버를 띄운 뒤, 클라이언트가 보낸 메시지를 모든 연결된 클라이언트에 브로드캐스트한다. 사용자 이름은 IP+포트로 표시되며 서버·클라이언트 전체 코드를 제공한다.
使用ws创建WebSokcet服务器
Node.js原生API并未提供WebSocket的支持，因此，需要安装第三方包才能使用WebSocket功能。对于WebSocket的支持，在开源社区有非常多的选择，本例子采用的是“ws”框架（项目主页为https://github.com/websockets/ws）。
“ws”顾名思义是一个用于支持WebSocket客户端和服务器的框架。它易于使用，功能强大，且不依赖于其他环境。
想其他Node.js应用一样，使用ws的首选方式是使用npm来管理。以下命令行用于安装ws在应用里面：
npm install ws具备了ws包之后，就可以创建WebSocket服务器了。以下是创建服务器的j简单示例：
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });上述例子服务器启动在8080端口。
聊天服务器的需求
聊天服务器的业务需求比较简单，是一个群聊聊天室。换言之，所有人发送的消息大家都可以见到。
当有新用户连接到服务器时，会以该用户的“IP+端口”作为用户的名称。
服务器的实现
根据前面知识的学习，实现一个聊天服务器比较简单，完整代码如下
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('open', function open() {
console.log('connected');
});
server.on('close', function close() {
console.log('disconnected');
});
server.on('connection', function connection(ws, req) {
const ip = req.connection.remoteAddress;
const port = req.connection.remotePort;
const clientName = ip + port;
console.log('%s is connected', clientName)
// 发送欢迎信息给客户端
ws.send("Welcome " + clientName);
ws.on('message', function incoming(message) {
console.log('received: %s from %s', message, clientName);
// 广播消息给所有客户端
server.clients.forEach(function each(client) {
if (client.readyState === WebSocket.OPEN) {
client.send( clientName + " -> " + message);
}
});
});
});当客户端给服务器发送消息时，服务器会将该客户端的消息转发给所有客户端。
客户端的实现
客户端是通HTML+JavaScript的方式实现的。由于浏览器原生提供了WebSocket的API，所以并不需要ws框架的支持。
客户端client.html文件代码如下：
<body>
<script type="text/javascript">
var socket;
if (!window.WebSocket) {
window.WebSocket = window.MozWebSocket;
}
if (window.WebSocket) {
socket = new WebSocket("ws://localhost:8080/ws");
socket.onmessage = function (event) {
var ta = document.getElementById('responseText');
ta.value = ta.value + '\n' + event.data
};
socket.onopen = function (event) {
var ta = document.getElementById('responseText');
ta.value = "连接开启!";
};
socket.onclose = function (event) {
var ta = document.getElementById('responseText');
ta.value = ta.value + "连接被关闭";
};
} else {
alert("你的浏览器不支持 WebSocket！");
}
function send(message) {
if (!window.WebSocket) {
return;
}
if (socket.readyState == WebSocket.OPEN) {
socket.send(message);
} else {
alert("连接没有开启.");
}
}
</script>
<form onsubmit="return false;">
<h3>WebSocket 聊天室：</h3>
<textarea id="responseText" style="width: 500px; height: 300px;"></textarea>
<br>
<input type="text" name="message" style="width: 300px" value="Welcome to waylau.com">
<input type="button" value="发送消息" onclick="send(this.form.message.value)">
<input type="button" onclick="javascript:document.getElementById('responseText').value=''"
value="清空聊天记录">
</form>
</body>运行应用
首先启动服务器。执行下面的命令：
node index.js接着用浏览器直接打开client.html文件，可以看到如下的聊天界面。
打开多个聊天窗口，就能模拟多个用户之间的群聊了。
검색엔진에 사이트가 노출되지 않도록 제어하는 방법을 정리한 글이다. robots.txt 파일의 User-agent, Disallow, Allow 규칙과 특정 디렉터리·페이지·구글봇만 차단하는 예시, URL 패턴 일치, 그리고 각 페이지에 넣는 meta robots 태그(noindex, nofollow) 사용법과 함께 구글 웹마스터 도움말 기준으로 설명한다.
제공해주신 검색엔진 크롤링 제어 방법에 관한 내용을 마크다운 형식으로 가독성 있게 정리해 드립니다.
검색엔진 로봇의 접근을 제어하여 원치 않는 페이지가 검색 결과에 노출되지 않도록 하는 방법은 크게 두 가지가 있습니다. 이 가이드는 구글 웹마스터 도움말 센터의 표준 규약을 바탕으로 작성되었습니다.
robots.txt 파일은 웹사이트의 루트 디렉토리에 위치해야 하며, 검색 로봇이 사이트 정보를 수집하기 전 가장 먼저 확인하는 규약 파일입니다.
*)| 설정 목적 | 코드 예시 |
|---|---|
| 모든 봇의 사이트 전체 차단 | User-Agent: *<br>Disallow: / |
| 특정 디렉토리 및 하위 항목 차단 | User-Agent: *<br>Disallow: /abcd/ |
| 특정 페이지 차단 | User-Agent: *<br>Disallow: /index.html |
| 특정 로봇(구글봇)만 차단 | User-Agent: Googlebot<br>Disallow: / |
| 특정 확장자(.gif) 파일 차단 | User-Agent: Googlebot<br>Disallow: /*.gif$ |
Disallow: /abcd라고 적으면 abcd 디렉토리뿐만 아니라 파일명이 abcd로 시작하는 모든 파일도 차단됩니다.사이트 루트 권한이 없어 robots.txt 파일을 수정할 수 없을 때, 개별 HTML 페이지의 <head> 섹션에 태그를 삽입하여 제어하는 방식입니다.
<meta name="robots" content="noindex, nofollow"><meta name="googlebot" content="noindex, nofollow"><meta name="robots" content="nofollow"><meta name="robots" content="noimageindex">HTML head에 넣는 meta og(오픈그래프) 태그 사용법을 정리한 글이다. OG의 개념과 동작 원리, 필수 og 태그(og:type, og:url, og:title, og:image 등), 이미지 권장 크기(1200x630), 네이버 블로그·카카오톡·트위터 미리보기 설정, 모바일 앱 연동 태그를 예제와 함께 설명한다.
HTML 에서 Head 부분에 해당하는 meta og(오픈그래프)에 대해 알아보도록 하겠습니다.
오픈그래프는 어떤 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜이며 페이스북에 의하여 기존의 다양한 메타 데이터 표기 방법을 참조하여 만들어졌습니다.
OG (Open Graph)
사용자가 클릭하기 전에 크롤러가 해당 웹사이트를 방문하여 HTML의 head의 메타데이터를 크롤링하여 미리 보기 화면을 생성해 줍니다.
대표적으로 카카오톡에서 공유한 링크 또는 티스토리에서 공유되는 링크 등이 있습니다.
OG Type 사용 방법
meta og 태그를 사용하기 위해서는 HTML의 <head> 안쪽에 다음과 같이 태그를 적용해줄 수 있습니다.
<html>
<head>
<meta property="og:" content="">
</head>
</html>이미지의 경우 최소 600 x 315 픽셀은 되어야 하며, 1200 x 630 픽셀 크기를 권장함
필수 og 태그
<!-- 필수는 og 태그 -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<!-- 필수는 아니지만, 추천하는 og 태그 -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">Naver 블로그, 카카오톡 미리보기 설정
<meta property="og:title" content="콘텐츠 제목" />
<meta property="og:url" content="웹페이지 URL" />
<meta property="og:type" content="웹페이지 타입(blog, website 등)" />
<meta property="og:image" content="표시되는 이미지" />
<meta property="og:title" content="웹사이트 이름" />
<meta property="og:description" content="웹페이지 설명" />트위터 미리보기 설정
<meta name="twitter:card" content="트위터 카드 타입(요약정보, 사진, 비디오)" />
<meta name="twitter:title" content="콘텐츠 제목" />
<meta name="twitter:description" content="웹페이지 설명" />
<meta name="twitter:image" content="표시되는 이미지 " />모바일 앱 미리보기 설정
모바일 앱이 존재하는 경우 앱으로 연결 시 노출
<--iOS-->
<meta property="al:ios:url" content=" ios 앱 URL" />
<meta property="al:ios:app_store_id" content="ios 앱스토어 ID" />
<meta property="al:ios:app_name" content="ios 앱 이름" />
<--Android-->
<meta property="al:android:url" content="안드로이드 앱 URL" />
<meta property="al:android:app_name" content="안드로이드 앱 이름" />
<meta property="al:android:package" content="안드로이드 패키지 이름" />
<meta property="al:web:url" content="안드로이드 앱 URL" />Node.js의 fs.readdir 함수로 디렉터리 안에 있는 모든 파일 목록을 읽어 웹 응답으로 출력하는 예제다. http 서버를 만들고 ./data 디렉터리의 파일 이름을 forEach로 순회하며 줄바꿈으로 이어 붙인 뒤 response.end()로 브라우저에 표시한다. 3000 포트에서 동작한다.
var http = require('http');
var fs = require('fs');
var app = http.createServer(function(request,response){
//디렉터리 안에 있는 모든 파일을 읽어온다
var list = '';
fs.readdir ('./data',function(error, filelist){
filelist.forEach(function(str) {
list +=str+"\n";
});
response.writeHead(200); //웹서버가 응답
response.end(list);
});
});
app.listen(3000);프로젝트 문의 및 견적 요청은 언제든 환영합니다.