오늘 저는 백그라운드에서 nodejs를 사용하고 클라이언트 및 서버 커뮤니케이션에서 Socket.io를 사용하여 간단한 대화방을 구현할 것입니다. 이것은 비교적 성숙한 WebSocket 프레임 워크입니다.
초기 작업
1. Express를 설치하고 이것을 사용하여 socket.io 및 정적 페이지를 호스트하십시오. 명령 npm install express --save, --save는 package.json 파일에 패키지를 추가 할 수 있습니다.
2. socket.io를 설치하고 npm을 install socket.io --save.
서버 코드 작성
먼저 Socket.io의 첫 번째 연결에는 HTTP 프로토콜이 필요하기 때문에 Express를 통해 웹 사이트를 호스팅하여 Socket.io 인스턴스에 첨부합니다.
코드 사본은 다음과 같습니다.
var express = require ( 'Express'),
io = 요구 사항 ( 'socket.io');
var app = express ();
app.use (express.static (__ dirname));
var server = app.listen (8888);
var ws = io.listen (서버);
서버 연결 이벤트를 추가하십시오. 클라이언트 연결이 성공하면 모든 온라인 사용자에게 알리기 위해 공지가 발행되고 사용자가 메시지를 보내면 방송이 전송되어 다른 사용자에게 알립니다.
코드 사본은 다음과 같습니다.
ws.on ( 'Connection', function (client) {
Console.log ( '/033 [96msomeone은 연결/033 [39m/n');
client.on ( 'join', function (msg) {
// 복제를 확인하십시오
if (checknickName (msg)) {
client.emit ( '닉네임', '중복 별명이 있습니다!');
}또 다른{
client.nickname = msg;
ws.sockets.emit ( '공지', '시스템', msg + '채팅방에 가입했습니다!');
}
});
// 메시지 보내기를 듣습니다
client.on ( 'send.message', function (msg) {
client.broadcast.emit ( 'send.message', client.nickname, msg);
});
// 연결을 끊는시기에 다른 사용자에게 알립니다
client.on ( '연결 끊기', function () {
if (client.nickname) {
client.broadcast.emit ( 'send.message', 'system', client.nickname + '채팅방을 떠나십시오!');
}
})
})
클라이언트는 별명으로 식별되므로 서버는 닉네임의 복제를 감지하는 기능이 필요합니다.
코드 사본은 다음과 같습니다.
// 닉네임이 복제되었는지 확인하십시오
var checknickname = function (name) {
for (ws.sockets.sockets의 var k) {
if (ws.sockets.sockets.hasownproperty (k)) {
if (ws.sockets.sockets [k] && ws.sockets.sockets [k] .nickname == name) {
진실을 반환하십시오.
}
}
}
거짓을 반환합니다.
}
고객 서비스 코드를 작성하십시오
서버는 타사 Websokcet 프레임 워크를 사용하므로 프론트 엔드 페이지는 socket.io 클라이언트 코드를 별도로 참조해야합니다. 소스 파일은 socket.io 모듈에서 찾을 수 있습니다. Windows 아래의 경로는 node_modules/socket.io/node_modules/socket.io-client/dist입니다. 여기에는 개발 버전과 압축 버전이 있으며 개발 버전에 대한 기본 참조로 충분합니다.
프론트 엔드는 주로 입력 별명 확인, 메시지 처리 및 전체 코드가 다음과 같습니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<title> socket.io 채팅방 예 </title>
<meta charset = "utf-8">
<link rel = "Stylesheet"href = "css/reset.css"/>
<link rel = "스타일 시트"href = "css/bootstrap.css"/>
<link rel = "Stylesheet"href = "css/app.css"/>
</head>
<body>
<div>
<div id = "채팅">
<ul id = "chat_conatener">
</ul>
</div>
<div>
<TextRea> </textRea>
<버튼 id = "Clear"> 클리어 화면 </button>
<button id = "send"> 보내기 </button>
</div>
</div>
<script type = "text/javaScript"src = "js/socket.io.js"> </script>
<script type = "text/javaScript">
var ws = io.connect ( 'http://172.16.2.184:8888');
var sendmsg = function (msg) {
ws.emit ( 'send.message', msg);
}
var addMessage = function (from, msg) {
var li = document.createelement ( 'li');
li.innerhtml = '<span>' + from + '</span>' + ':' + msg;
document.querySelector ( '#chat_conatener'). AppendChild (li);
// 컨텐츠 영역의 스크롤 막대를 바닥으로 설정합니다.
document.querySelector ( '#chat'). scrollTop = document.querySelector ( '#chat'). ScrollHeight;
// 초점을 설정합니다
document.querySelector ( 'textArea'). focus ();
}
var send = function () {
var ele_msg = document.querySelector ( 'textArea');
var msg = ele_msg.value.replace ( '/r/n', '') .trim ();
Console.log (MSG);
if (! msg) 반환;
sendmsg (msg);
// 자신의 콘텐츠 영역에 메시지를 추가합니다
AddMessage ( 'You', MSG);
ele_msg.value = '';
}
ws.on ( 'connect', function () {
var nickname = window.prompt ( '닉네임을 입력하십시오!');
while (! 별명) {
nickname = window.prompt ( '닉네임이 비어있을 수 없다, 다시 들어가십시오!')
}
ws.emit ( 'join', 닉네임);
});
// 중복 닉네임이 있습니다
ws.on ( 'nickname', function () {
var nickname = window.prompt ( '닉네임에는 복제가 있습니다. 다시 참가하십시오!');
while (! 별명) {
nickname = window.prompt ( '닉네임이 비어있을 수 없다, 다시 들어가십시오!')
}
ws.emit ( 'join', 닉네임);
});
ws.on ( 'send.message', function (from, msg) {
AddMessage (From, MSG);
});
ws.on ( '공지', 함수 (from, msg) {
AddMessage (From, MSG);
});
document.querySelector ( 'textArea'). addEventListener ( 'keypress', function (event) {
if (event.which == 13) {
보내다();
}
});
document.querySelector ( 'textArea'). addEventListener ( 'keydown', function (event) {
if (event.which == 13) {
보내다();
}
});
document.querySelector ( '#send'). addEventListener ( 'click', function () {
보내다();
});
document.querySelector ( '#requ'). addEventListener ( 'click', function () {
document.querySelector ( '#chat_conatener'). innerHtml = '';
});
</스크립트>
</body>
</html>
전체 코드 압축 파일이 여기에 제공됩니다
요약
Nodejs는 특히 메시징 및 네트워크 프로그래밍, 자연스러운 비동기 IO를 처리 할 때 좋은 일입니다.