Bootstrap modal 혹은 Bootstrap Vue modal 에서 키보드 핸들링이 안될 때
안녕하세요 coconut 입니다~
이번에는 웹페이지에서 흔하게 사용하는 modal 내에서 가끔 쓰일 수 있는 이벤트인 Ctrl + C 와 같은 키보드 핸들링을
가능하게 해주는 옵션을 알아보겠습니다.
저는 당연하다고 생각했던 modal 내에서 클립보드 복사가 안되는 문제를 발견했습니다.
답답해서 여러가지 키워드로 구글링을 하다가 원인을 겨우겨우 발견하게 되었습니다.
modal이 create 되면 modal 창이 유지되도록 강제로 포커싱하는 이유였습니다.
$.fn.modal.Constructor.prototype._enforceFocus = function() {};
bootstrap4 기준 이 코드로 해결을 해줄 수 있습니다.
bootstrap vue 기준으로는 b-modal 생성 시에 no-enforce-focus 옵션을 넣으면 해결이 되는 문제입니다.
여기서 핵심은 사용하는 프레임워크 혹은 언어에서 강제 포커싱을 해제해주면 됩니다.
즐거운 코딩하시기 바랍니다~
NodeJS로 간단한 채팅 서버 구축하기
이번에는 지인과 함께 간단한 앱을 만들면서 생성하게 된 채팅서버를 공개해 봅니다.
바로 갑니다앙~!
var app = require('http').createServer(handler); var fs = require('fs'); var io = require('socket.io').listen(app);
우선 http와 나중에 사용할 fs, 그리고 필수 라이브러리인 socket.io를 import 합니다.
if (process.argv.length < 3){ console.log('app <port>'); process.exit(1); } app.listen(process.argv[2]); console.log(process.argv[2] +' Started!! '); function handler(req, res) { fs.readFile(__dirname + '/index.html', function (err, data) { if (err) { res.writeHead(500); return res.end('Error loading index.html'); } res.writeHead(200); data = data.toString('utf-8').replace('<%=host%>', req.headers.host); res.end(data); }); }
그리고 렌더링할 index.html 파일 경로를 설정해주고, 렌더링 코드를 입력해 줍니다.
process.argv로는 매개변수로 포트를 설정할 수 있도록 합니다.
그 다음으로 socket.io 코드를 작성합니다.
io.sockets.on('connection', function (socket) { fs.readFile( __dirname + "/../data/chat.json", "utf8", function (err, data) { prev_data = JSON.parse(data); socket.emit('init', prev_data); console.log(prev_data); }); socket.on('message', function(data){ var split_cnt = prev_data.length; if(split_cnt > 10){ // 저장될 채팅메시지의 갯수 prev_data.splice(0,1); } prev_data.push(data); fs.writeFile( __dirname + "/../data/chat.json", JSON.stringify(prev_data), function(err) { // throws an error, you could also catch it here if (err) throw err; // success case, the file was saved }); socket.broadcast.emit('message', data); }); });
chat.json은 서버상에 저장될 채팅 메시지를 json 파일로 저장하는 역할을 합니다.
경로는 여러분이 원하는 곳에 놔두셔도 됩니다.
그리고 중간에 저장될 채팅메시지 갯수를 지정할 수 있는데요. 배열 길이와 일치하도록 했습니다.
이것 또한 여러분이 커스터마이징 하시면 됩니다.
요 위까지 서버측 코드입니다.
——————————————————————————————-
이제 아래로 클라이언트 코드입니다.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>socket io redis store</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="/socket.io/socket.io.js"></script> <script> var socket = io.connect('http://<%=host%>'); $(document).ready(function(){ socket.on('init',function(data){ for(var i=0; i<data.length; i++){ console.log(data[i]); $('#chat').append('<li>' + data[i] + '</li>'); } }); socket.on('message',function(data){ $('#chat').append('<li>' + data + '</li>'); }); $('#btnSend').click(function(){ send(); }); $('#inputT').keyup(function(e){ if(e.keyCode == 13) send(); }); }); function send() { var message = $('#inputT').val(); if (message.length < 1) return; socket.emit('message', message); $('#chat').append('<li>'+message+'</li>'); $('#inputT').val(''); } </script> </head> <body> <input type="text" id="inputT" /> <button id="btnSend">보내기</button> <ul id="chat"></ul> </body> </html>
코드 작성을 완료하였으면 실행을 해줍니다.
node index.js 3000
저는 3000번 포트로 실행시켰습니다.
끝~
'JavaScript > NodeJS' 카테고리의 다른 글
NodeJS의 forever 모듈 설치하고 다루기 (0) | 2017.11.12 |
---|
NodeJS의 forever 모듈 설치하고 다루기
NodeJS에 여러가지 유용한 모듈들이 많지만 나는 이것을 즐겨 쓴다.
background에서 앱이 꺼지지 않고 돌아가게 해주는 모듈인데 이름도 그에 걸맞게
forever라고 한다.
우선 설치 방법부터 소개한다. npm패키지 설치툴로 설치하도록 하면 매우 간단하다.
npm install -g forever
이제부터 바로 사용할 수가 있다.
forever start node app.js 명령어를 치면 app.js를 바로 백그라운드에서 무제한으로 돌게 된다.
그리고 이렇게 돌아가는 프로세스들의 리스트를 조회할 수 있는 명령어가
forever list 이다.
아무 프로세스가 돌아가지 않을 시에 이렇게 표시가 된다.
forever 프로세스가 돌아갈 시에는 이렇게 표시가 된다.
forever 프로세스를 정지시킬려면 forever stop (pid)를 입력하면 정지가 된다.
'JavaScript > NodeJS' 카테고리의 다른 글
NodeJS로 간단한 채팅 서버 구축하기 (0) | 2018.02.20 |
---|