> 웹 프론트엔드 > JS 튜토리얼 > 채팅 기능을 구현하는 node.js + 소켓.io에 대한 자세한 설명

채팅 기능을 구현하는 node.js + 소켓.io에 대한 자세한 설명

零下一度
풀어 주다: 2017-07-02 10:17:12
원래의
2254명이 탐색했습니다.

이 글은 주로 지점간 랜덤 매칭 채팅을 구현하기 위한 node.js + 소켓.io를 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

노트를 자주 게시할 수 있는 분들을 정말 존경합니다. 사실 저도 자주 보내고 싶은데 실력도 부족하고 게으른 편이라 고수님들께 좀 더 배워야겠습니다. 얼마전에 폭탄플랫폼에 딸려오는 소켓을 이용하여 채팅방을 작성했습니다. 사실, 기본적으로 데모를 수정했습니다. 이번에는 랜덤 비공개 채팅을 구현하기 위해 node와 소켓.io를 기반으로 서비스를 구축했습니다. 물론 node를 사용하여 무언가를 만드는 것은 처음이었습니다. 잘 안되는데 공유하고 싶었어요.

먼저 사용되는 것들에 대해 이야기해 보겠습니다. node는 백그라운드 서비스에 사용되고, express는 정적 리소스를 호스팅하는 데 사용되고, Socket.io는 채팅 데이터를 전송하는 데 사용됩니다. 다음으로 아이디어에 대해 이야기해 보겠습니다. 실제로, 데이터를 전송하기 위해 소켓.io를 사용하는 것은 매우 간단합니다. 프런트엔드 페이지에 소켓.io.js를 소개한 다음 require('socket.io ')를 노드 측에서 실행하면 프런트엔드에서 다음 코드를 통해 정보를 보내거나 받을 수 있습니다.


//前端
socket = io.connect('ws://'+'服务器ip');
socket.emit('msg',{msg:'前端要发送的信息'});//要发送的信息(以对象的形式发送)
socket.on('msg2',function(data){
  ...
  //这里的data是后端传过来的信息
})
//后端
socket.on('msg',function(data){
  var data = data; //这里的data就是前端传过来的数据,即{msg:'前端要发送的信息'}
  console.log(data.msg) // 打印出 “前端要发送的信息”
})
//同理,后端要传信息给前端也是一样
socket.emit('msg2',{msg:'后端要发送的信息'});
로그인 후 복사

백엔드가 소켓을 어떻게 실행하는지 볼까요


 var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
io.on('connection', function(socket){ //当前端执行 socket = io.connect('ws://'+host); 的时候,此处的io会监听到connection事件
 socket.on('msg',function(data){ 
 io.emit('onlineCount',freeList)
 //如果直接用io.emit来发送数据的话,这代表广播的形式,就是当前所有打开服务的前端页面都会收到这条消息。
 
   socket.emit('welcome',{msg:'欢迎...'})//这里将给当前连接的页面发送一个欢迎的对象数据
 })
 socket.on('disconnect',function(){
 //当前端页面关闭,或者失去连接时,后端会接收到disconnect事件
   
 })

})
http.listen(4000, function(){
 console.log('listening on *:4000');
});
로그인 후 복사

물론 그것만이 아닙니다. 웹소켓 프로토콜은 브라우저와 서버 사이에 긴 링크를 설정하여 서로 데이터를 전송하고, 예를 들어, 여러 페이지가 열리면 여러 개의 소켓 인스턴스가 있게 됩니다. 연결을 설정하는 각 프런트 엔드 페이지에는 후속 지점 간 개인 채팅에 대한 아이디어를 제공하는 소켓 인스턴스가 있습니다. 물론 직접 방송을 통해 정보를 보낼 수도 있지만 이는 채팅방 시나리오에 적합합니다.

P2P를 구현하는 방법은 무엇입니까? 앞서 언급했듯이 연결을 설정하는 각 페이지는 소켓 인스턴스를 생성합니다. 그러면 메시지를 수신하는 동안 소켓 인스턴스가 어떤 인스턴스와 채팅하고 있는지 확인하기 위해 백엔드만 필요합니다. , 일치하는 다른 소켓 인스턴스로 메시지를 보내면 됩니다. 간단히 말하면, 백엔드에 메시지를 보낸 다음 해당 메시지가 xxx에 대한 것임을 백엔드에 알리면 백엔드가 xxx에 해당하는 소켓 인스턴스를 찾아서 그에게 메시지를 보내는 것과 같습니다.


//前端
window.id = new Date().getTime()+""+Math.floor(Math.random()*899+100);
//每次登录,获取一个唯一的用户id
socket = io.connect('ws://'+host);
socket.emit('newUser',{ user_name : name, user_id : id})
//建立连接后,将我的用户名和id都传给后端

//后端
socket.on('newUser',function(data){
 var nickname = data.user_name,
  user_id = data.user_id;
 userServer[user_id] = socket;
 //后端接收后,将该用户socket保存在一个对象里,key值为id,value就是这个用户的socket
  
})
로그인 후 복사

위 코드를 통해 백엔드는 각 연결 소켓의 해당 값과 해당 ID를 포함하는 userServer 객체를 얻습니다. 이런 식으로 정보가 전송될 때마다 수신할 객체가 첨부됩니다. . 지점 간 데이터 전송을 달성하기 위한 ID입니다.

다음 단계는 데이터 처리, 상대방 ID를 알아내는 방법 등입니다. 제 표현력이 부족하고 게으른 관계로 자세히 설명하지 않겠습니다~~ 코드는 github에 호스팅되어 있으니 어서 오세요. 확인해 보세요

위 내용은 채팅 기능을 구현하는 node.js + 소켓.io에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿