0 기초 구현 node+express 맞 춤 형 채 팅 방 의 예제
효과 도
프로젝트 구조
기능 을 실현 하 다
로그 인 검 측
다음은 어떻게 실현 되 는 지 일일이 설명 할 것 이다.
전기 준비
환경 、 express 、 socket.io
구체 적 실현
1.채 팅 방 을 서버 에 배치
먼저 node 로 서버 를 구축 하여 localhost:3000 포트 에 배치 하고 브 라 우 저 에"hello World"를 보 내 고 server.js 파일 을 새로 만 듭 니 다.
var app = require('express')(); // express
var http = require('http').Server(app);
app.get('/', function(req, res){ // localhost:3000 “hello world”
res.send('<h1>Hello world</h1>'); //
});
http.listen(3000, function(){ // 3000
console.log('listening on *:3000');
});
노드 서버 구축 에 성 공 했 습 니 다.
다음은 express 로 브 라 우 저 에 html 페이지 를 되 돌려 줍 니 다.
# express
npm install --save express
var express = require('express');
var app = express();
var http = require('http').Server(app);
// / www
app.use('/', express.static(__dirname + '/www'));
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>chat</title>
<link rel="stylesheet" href="style/index.css" rel="external nofollow" >
<link rel="stylesheet" href="style/font-awesome-4.7.0/css/font-awesome.min.css" rel="external nofollow" >
</head>
<body>
<div class="all">
<div class="name">
<!-- <h2> </h2> -->
<input type="text" id="name" placeholder=" ..." autocomplete="off">
<button id="nameBtn"> </button>
</div>
<div class="main">
<div class="header">
<img src="image/logo.jpg">
happy
</div>
<div id="container">
<div class="conversation">
<ul id="messages"></ul>
<form action="">
<div class="edit">
<input type="color" id="color" value="#000000">
<i title=" " class="fa fa-smile-o" id="smile">
</i><i title=" " class="fa fa-picture-o" id="img"></i>
<div class="selectBox">
<div class="smile">
</div>
<div class="img">
</div>
</div>
</div>
<!-- autocomplete -->
<textarea id="m"></textarea>
<button class="btn rBtn" id="sub"> </button>
<button class="btn" id="clear"> </button>
</form>
</div>
<div class="contacts">
<h1> (<span id="num">0</span>)</h1>
<ul id="users"></ul>
<p> ~</p>
</div>
</div>
</div>
</div>
</body>
</html>
채 팅 방 이 서버 에 성공 적 으로 배치 되 었 습 니 다.
2,검 측 로그 인
클 라 이언 트 와 서버 사이 에서 메 시 지 를 전송 하려 면 socket.io 를 사용 해 야 합 니 다.
# socket.io
npm install --save socket.io
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.use('/', express.static(__dirname + '/www'));
io.on('connection', function(socket){ //
console.log('a user connected');
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
server.js 에 전역 배열 을 user 로 설정 합 니 다.사용자 가 연결 에 성공 할 때마다 연결 이벤트 에서 사용자 의 닉네임 push 를 user 에 넣 고 user.length 를 인쇄 하면 성공 적 으로 연 결 된 사용자 의 수 를 알 수 있 습 니 다.
잠깐 만.
사용자 가 연결 할 때 닉네임 로그 인 을 입력 하 십시오.사용자 의 닉네임 이 이미 존재 하 는 지 확인 하고 닉네임 이 같은 상황 이 발생 하지 않도록 해 야 합 니 다.서버 에서 로그 인 이 벤트 를 감청 하여 이 상황 을 판단 해 야 합 니 다.모든 것 이 사용자 가 연결 한 후에 발생 하기 때문에 트리거 이 벤트 는 connection 이벤트 의 리 셋 함수 에 써 야 합 니 다.
io.on('connection', (socket)=> {
//
io.emit('disUser', usersInfo);
// ，
socket.on('login', (user)=> {
if(users.indexOf(user.name) > -1) { //
socket.emit('loginError'); //
} else {
users.push(user.name); //
usersInfo.push(user); //
socket.emit('loginSuc'); //
socket.nickname = user.name;
io.emit('system', { //
name: user.name,
status: ' '
});
io.emit('disUser', usersInfo); //
console.log(users.length + ' user connect.'); //
}
});
io.emit(foo); // foo
socket.emit(foo); // foo
socket.broadcast.emit(foo); // foo
$(function() {
// io-client
// connection
var socket = io();
//
$('#nameBtn').click(()=> {
var imgN = Math.floor(Math.random()*4)+1; //
if($('#name').val().trim()!=='')
socket.emit('login', { //
name: $('#name').val(),
img: 'image/user' + imgN + '.jpg'
});
return false;
});
// ，
socket.on('loginSuc', ()=> {
$('.name').hide();
})
socket.on('loginError', ()=> {
alert(' ， ！');
$('#name').val('');
});
});
로그 인 검 측 완료.
3.시스템 은 사용자 의 상 태 를 자동 으로 알려 줍 니 다(입장/떠 나 기)
이 기능 은 위의 그림 에서 보 여 준 시스템 알림"XXX 채 팅 방 에 들 어가 기"를 실현 하기 위해 로그 인 성공 시 system 이 벤트 를 촉발 하여 모든 사용자 에 게 정 보 를 방송 합 니 다.이때 socket.emit 가 아 닌 io.emit 를 사용 합 니 다.클 라 이언 트 코드 는 다음 과 같 습 니 다.
//
socket.on('system', (user)=> {
var data = new Date().toTimeString().substr(0, 8);
$('#messages').append(`<p class='system'><span>${data}</span><br /><span>${user.name} ${user.status} <span></p>`);
//
$('#messages').scrollTop($('#messages')[0].scrollHeight);
});
클 라 이언 트 가 온라인 사용 자 를 표시 하 는 이벤트 disUser 를 감청 합 니 다.다음 세 시간 동안 서버 에서 이 이 벤트 를 한 번 만 터치 하여 다시 렌 더 링 합 니 다.
프로그램 시작 시사용자 가 방 에 들 어 갈 때마다사용자 가 방 을 떠 날 때마다
// chat-client.js
//
socket.on('disUser', (usersInfo)=> {
displayUser(usersInfo);
});
//
function displayUser(users) {
$('#users').text(''); //
if(!users.length) {
$('.contacts p').show();
} else {
$('.contacts p').hide();
}
$('#num').text(users.length);
for(var i = 0; i < users.length; i++) {
var $html = `<li>
<img src="${users[i].img}">
<span>${users[i].name}</span>
</li>`;
$('#users').append($html);
}
}
사용자 가 메 시 지 를 보 낼 때 서버 쪽 의 sendmsg 이 벤트 를 촉발 하고 메시지 내용 을 매개 변수 로 합 니 다.서버 측 감 은 sendmsg 이 벤트 를 듣 고 다른 모든 사용자 에 게 이 메 시 지 를 방송 합 니 다.socket.broadcast.emit(foo)
// server.js
//
socket.on('sendMsg', (data)=> {
var img = '';
for(var i = 0; i < usersInfo.length; i++) {
if(usersInfo[i].name == socket.nickname) {
img = usersInfo[i].img;
}
}
socket.broadcast.emit('receiveMsg', { //
name: socket.nickname,
img: img,
msg: data.msg,
color: data.color,
side: 'left'
});
socket.emit('receiveMsg', { // ， ？ css
name: socket.nickname,
img: img,
msg: data.msg,
color: data.color,
side: 'right'
});
});
//
$('#sub').click(sendMsg);
$('#m').keyup((ev)=> {
if(ev.which == 13) {
sendMsg();
}
});
//
socket.on('receiveMsg', (obj)=> { //
$('#messages').append(`
<li class='${obj.side}'>
<img src="${obj.img}">
<div>
<span>${obj.name}</span>
<p>${obj.msg}</p>
</div>
</li>
`);
//
$('#messages').scrollTop($('#messages')[0].scrollHeight);
});
//
function sendMsg() {
if($('#m').val() == '') { //
alert(' ！');
return false;
}
socket.emit('sendMsg', {
msg: $('#m').val()
});
$('#m').val('');
return false;
}html 5 의 input 새로운 기능 덕분에 type 을 통 해 color 의 input 호출 시스템 팔레트 를 사용 할 수 있 습 니 다.
<!-- $('#color').val(); ， #FFCCBB -->
<input type='color' id='color'> 7.이모 티 콘 전송 지원
이모 티 콘 을 보 내 는 것 은 간단 합 니 다.이모 티 콘 을 li 에 넣 고 사용자 가 li 를 클릭 하면 이모 티 콘 src 의 번 호 를 해석 하고[emoji+이모 티 콘 번호]형식 으로 채 팅 상자 에 저장 하 며 보 내 기 를 클릭 한 후 src 로 해석 합 니 다.분석 과 복원 과정 입 니 다.이 과정 에서 우리 의 서버 코드 는 변 하지 않 고 클 라 이언 트 가 감청 한 receivemsg 사건 을 바 꿔 야 합 니 다.
// chat-client.js
//
$('#smile').click(()=> {
$('.selectBox').css('display', "block");
});
$('#smile').dblclick((ev)=> {
$('.selectBox').css('display', "none");
});
$('#m').click(()=> {
$('.selectBox').css('display', "none");
});
//
$('.emoji li img').click((ev)=> {
ev = ev || window.event;
var src = ev.target.src;
var emoji = src.replace(/\D*/g, '').substr(6, 8); //
var old = $('#m').val(); //
$('#m').val(old+'[emoji'+emoji+']');
$('.selectBox').css('display', "none");
});
// chat-client.js
//
socket.on('receiveMsg', (obj)=> {
//
var msg = obj.msg;
var content = '';
while(msg.indexOf('[') > -1) { // []
var start = msg.indexOf('[');
var end = msg.indexOf(']');
content += '<span>'+msg.substr(0, start)+'</span>';
content += '<img src="image/emoji/emoji%20('+msg.substr(start+6, end-start-6)+').png">';
msg = msg.substr(end+1, msg.length);
}
content += '<span>'+msg+'</span>';
$('#messages').append(`
<li class='${obj.side}'>
<img src="${obj.img}">
<div>
<span>${obj.name}</span>
<p style="color: ${obj.color};">${content}</p>
</div>
</li>
`);
//
$('#messages').scrollTop($('#messages')[0].scrollHeight);
});
8.사진 전송 지원
먼저 그림 단추 스타일 입 니 다.그림 을 보 내 는 단 추 는 type 이 file 인 input 입 니 다.여기에 스타일 을 바 꾸 는 작은 기술 이 있 습 니 다.그것 은 input 의 투명 도 를 0,z-index 를 5 로 설정 하고 원 하 는 스타일 을 div 에 두 고 z-index 를 1 로 input 에 덮어 쓰 는 것 입 니 다.
<input type="file" id="file">
<i class="fa fa-picture-o" id="img"></i>
css：
.edit #file {
width: 32.36px;
height: 29px;
opacity: 0;
z-index: 5;
}
.edit #img {
z-index: 0;
margin-left: -43px;
}
다음은 단 추 를 누 르 면 그림 을 보 냅 니 다.fileReader 대상 을 사 용 했 습 니 다.fileReader 를 설명 하 는 좋 은 글 이 있 습 니 다.fileReader 는 대상 입 니 다.선택 한 파일 을 64 비트 출력 한 다음 결 과 를 reader.result 에 저장 할 수 있 습 니 다.그림 을 선택 하면 reader.result 는 그림 의 src 를 저장 합 니 다.
// chat-client.js
//
$('#file').change(function() {
var file = this.files[0]; //
var reader = new FileReader();
//
reader.onerror = function(){
console.log(' ， ！');
};
//
reader.onload = function() {
var src = reader.result; //
var img = '<img class="sendImg" src="'+src+'">';
socket.emit('sendMsg', { //
msg: img,
color: color,
type: 'img' // img
});
};
reader.readAsDataURL(file); // 64
});
응답 하 는,우 리 는 chat-client.js 에서 receiveMsg 이벤트 감청 함 수 를 수정 하고,입력 type 에 따라 다른 조작 을 해 야 합 니 다.
chat-client.js
//
socket.on('receiveMsg', (obj)=> {
//
if(obj.type == 'img') {
$('#messages').append(`
<li class='${obj.side}'>
<img src="${obj.img}">
<div>
<span>${obj.name}</span>
<p style="padding: 0;">${obj.msg}</p>
</div>
</li>
`);
$('#messages').scrollTop($('#messages')[0].scrollHeight);
return;
}
//
//
}); 기능 이 완 비 된 채 팅 방 을 원만 하 게 완성 하 세 요!
원본 주소:windlany/happy-chat본 고 는 이틀 동안 계속 썼 습 니 다.정말 코드 를 두 드 리 는 것 보다 글 을 쓰 는 것 이 더 힘 들 었 습 니 다.사실은 채 팅 방 을 쓰 는 것 이 어렵 지 않 습 니 다.이것 은 node 시작 작품 이 라 고 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Express.js에서 오류를 처리하는 간단한 방법Express에서 오류를 처리하는 여러 가지 방법이 있습니다. 이를 수행하는 일반적인 방법은 기본 익스프레스 미들웨어를 사용하는 것입니다. 또 다른 방법은 컨트롤러 내부의 오류를 처리하는 것입니다. 이러한 처리 방식...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
