Nodejs 실시 간 통신 온라인 채 팅 방 (Socket. io) 소장
인터넷 채 팅 방 은 웹 1.0 시대 에 등 장 했 지만 그 당시 기술 지원 이 제 한 됐 고 대부분 브 라 우 저 플러그 인 BHO, JavaApplet, Flash 를 통 해 이 루어 졌 다.현재 HTML 5 기술 이 활 기 를 띠 고 있 으 며, 웹 소켓 을 통 해 이 루어 진 인터넷 채 팅 방 은 웹 소켓 의 첫 번 째 실험 으로 헬 로 월 드 처럼 간단 하 다 고 정의 되 고 있다.
오늘 나 도 이 실험 을 완 성 했 으 니 정말 시원 하 다!
목차
socket. io 하 나 는 Nodejs 구조 체 계 를 바탕 으로 웹 socket 을 지원 하 는 프로 토 콜 이 시간 통신 에 사용 되 는 패키지 입 니 다.socket. io 는 크로스 브 라 우 저 구축 실시 간 응용 에 완전한 패 키 지 를 제공 합 니 다. socket. io 는 완전히 자바 script 에 의 해 이 루어 집 니 다.
Nodejs 를 기반 으로 웹 소켓 의 다른 프레임 워 크 를 실현 합 니 다.
2. 서버 측 과 클 라 이언 트 통신 디자인
위의 그림 에서 client 1 과 server 는 통신 과정 을 설명 하고 client 2 는 다른 클 라 이언 트 에 대해 방송 을 통 해 메시지 통신 을 한다.
HTTP 요청 과 웹 소켓 요청 모두 3000 포트 를 사용 할 수 있 도록 socket. io 와 express 3 의 혼합 모드 를 사용 합 니 다.
서버 에서 이 루어 집 니 다. 핵심 파일 app. js 만 있 습 니 다.
//
var express = require('express')
, path = require('path')
, app = express()
, server = require('http').createServer(app)
, io = require('socket.io').listen(server);
//
io.set('log level', 1);
//WebSocket
io.on('connection', function (socket) {
socket.emit('open');//
//
// console.log(socket.handshake);
//
var client = {
socket:socket,
name:false,
color:getColor()
}
// message
socket.on('message', function(msg){
var obj = {time:getTime(),color:client.color};
// ，
if(!client.name){
client.name = msg;
obj['text']=client.name;
obj['author']='System';
obj['type']='welcome';
console.log(client.name + ' login');
//
socket.emit('system',obj);
//
socket.broadcast.emit('system',obj);
}else{
// ，
obj['text']=msg;
obj['author']=client.name;
obj['type']='message';
console.log(client.name + ' say: ' + msg);
// （ ）
socket.emit('message',obj);
//
socket.broadcast.emit('message',obj);
}
});
//
socket.on('disconnect', function () {
var obj = {
time:getTime(),
color:client.color,
author:'System',
text:client.name,
type:'disconnect'
};
//
socket.broadcast.emit('system',obj);
console.log(client.name + 'Disconnect');
});
});
//express
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
});
app.configure('development', function(){
app.use(express.errorHandler());
});
// webscoket html
app.get('/', function(req, res){
res.sendfile('views/chat.html');
});
server.listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});
var getTime=function(){
var date = new Date();
return date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
}
var getColor=function(){
var colors = ['aliceblue','antiquewhite','aqua','aquamarine','pink','red','green',
'orange','blue','blueviolet','brown','burlywood','cadetblue'];
return colors[Math.round(Math.random() * 10000 % colors.length)];
}
4. 클 라 이언 트 구현
여기 서 우 리 는 몇 개의 파일 을 정의 해 야 합 니 다: chat. html, chat. js, jquery. min. js, main. css
1). views/chat.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Socket.io - Simple chat</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="javascripts/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="javascripts/chat.js"></script>
</head>
<body>
<h1>Socket.io - Simple chat room</h1>
<div>
<span id="status">Connecting...</span>
<input type="text" id="input"/>
</div>
<div id="content"></div>
</body>
</html>
2). public/javascript/chat.js
$(function () {
var content = $('#content');
var status = $('#status');
var input = $('#input');
var myName = false;
// websocket
socket = io.connect('http://localhost:3000');
// server
socket.on('open',function(){
status.text('Choose a name:');
});
// system ， welcome disconnect，
socket.on('system',function(json){
var p = '';
if (json.type === 'welcome'){
if(myName==json.text) status.text(myName + ': ').css('color', json.color);
p = '<p style="background:'+json.color+'">system @ '+ json.time+ ' : Welcome ' + json.text +'</p>';
}else if(json.type == 'disconnect'){
p = '<p style="background:'+json.color+'">system @ '+ json.time+ ' : Bye ' + json.text +'</p>';
}
content.prepend(p);
});
// message ，
socket.on('message',function(json){
var p = '<p><span style="color:'+json.color+';">' + json.author+'</span> @ '+ json.time+ ' : '+json.text+'</p>';
content.prepend(p);
});
// “ ”
input.keydown(function(e) {
if (e.keyCode === 13) {
var msg = $(this).val();
if (!msg) return;
socket.send(msg);
$(this).val('');
if (myName === false) {
myName = msg;
}
}
});
});
3). public / javascript / jquery. min. js 는 jquery 에서 공식 다운로드:http://jquery.com/
4). public/css/main.css
* {padding:0px; margin:0px;}
body{font-family:tahoma; font-size:12px;margin:10px;}
p {line-height:18px;padding:2px;}
div {width:500px;}
#content {
padding:5px;
background:#ddd;
border-radius:5px;
border:1px solid #CCC;
margin-top:10px;
}
#input {
border-radius:2px;
border:1px solid #ccc;
margin-top:10px;
padding:5px;
width:380px;
}
#status {
width:100px;
display:block;
float:left;
margin-top:15px;
}
5. 전체 사례 코드
프로젝트 가 github 에 업로드 되 었 습 니 다:https://github.com/bsspirit/chat-websocket
다운로드, 설치, 서버 시작
git clone https://github.com/bsspirit/chat-websocket.git
npm install
node app.js
브 라 우 저 를 열 면 몇 개의 창 을 더 열 어 서로 다른 사용자 가 가지 고 있 는 대 화 를 모 의 할 수 있 습 니 다.
http://localhost:3000
실험 을 마치 고 나 니 기분 이 아주 좋다.기술 혁신의 혁명!!
전재 출처:http://blog.fens.me/nodejs-socketio-chat/
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Node.js를 AWS서버에서 사용하는 실습간단한 예제와 함께 AWS에서 Node.js를사용하는 법을 배워보도록 하겠다. 해당 github에 있는 레포지토리로 사용을 할 것이다. 3000번 포트로 Listen되는 예제이고 간단히 GET, POST, DELET...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
