1. 소개
첫 번째는 Socket.IO 공식 웹사이트입니다: http://socket.io
공식 웹사이트는 매우 간단합니다. API 문서도 없고 참고용으로 간단한 "사용 방법"만 나와 있습니다. Socket.IO는 공식 웹사이트만큼 간단하고, 사용하기 쉽고, 사용하기 쉽기 때문입니다.
그럼 Socket.IO는 정확히 무엇인가요? Socket.IO는 클라이언트 측 js와 서버 측 nodejs를 포함하는 WebSocket 라이브러리입니다. 그 목표는 다양한 브라우저와 모바일 장치에서 사용할 수 있는 실시간 애플리케이션을 구축하는 것입니다. WebSocket, AJAX 롱 폴링, Iframe 스트리밍 등 다양한 방식 중 브라우저에 따라 최적의 방식을 자동으로 선택해 실시간 네트워크 애플리케이션을 구현하는 매우 편리하고 사용자 친화적이며, 지원되는 브라우저는 다음과 같습니다. IE5.5만큼 낮습니다. 대부분의 요구를 충족할 수 있어야 합니다.
2. 설치 및 배포
2.1 설치
우선 node.js 환경에서는 설치가 매우 간단합니다.
npm 설치 소켓.io
2.2 Express를 결합하여 서버 구축
express는 HTTP 서버를 구축할 때 자주 사용하는 작은 Node.js 웹 애플리케이션 프레임워크이므로 Socket.IO를 사용하여 직접 설명하고 예제로 표현해보겠습니다.
var express = require('express')
, 앱 = 표현()
, 서버 = require('http').createServer(app)
, io = require('socket.io').listen(서버);
server.listen(3001);
Express를 사용하지 않는 경우, Socket.io/#how-to-use를 참고하세요
3. 기본 사용법
주로 서버측 코드와 클라이언트측 코드 두 부분으로 나뉘는데, 둘 다 매우 간단합니다.
서버(app.js):
//위 코드 계속
app.get('/', 함수(req, res) {
res.sendfile(__dirname '/index.html');});
io.sockets.on('connection', 함수(소켓) {
소켓.emit('news', { hello: 'world' });
소켓.on('다른 이벤트', 함수(데이터) {
console.log(데이터);
});
});
먼저 io.sockets.on 함수는 클라이언트가 연결을 시작하는 이벤트로 "connection" 문자열을 받아들입니다. 연결이 성공하면 소켓 매개변수가 있는 콜백 함수가 호출됩니다. Socket.IO를 사용할 때 기본적으로 이 콜백 함수에서 사용자 요청을 처리합니다.
소켓의 가장 중요한 기능은 방출 및 on 함수입니다. 전자는 이벤트를 제출(발신)합니다(이벤트 이름은 문자열로 표시됨). 또한 몇 가지 기본 이벤트 이름을 사용자 정의할 수 있습니다. 그 뒤에는 소켓으로 전송된 콘텐츠를 나타내며, 후자는 이벤트를 수신하고(이벤트 이름은 문자열로 표시됨) 이벤트가 수신될 때 호출되는 콜백 함수를 나타냅니다. 여기서 data는 수신된 데이터입니다.
위의 예에서는 뉴스 이벤트를 보내고 다른 이벤트 이벤트를 받았습니다. 그러면 클라이언트에는 해당 수신 및 전송 이벤트가 있어야 합니다. 예, 클라이언트 코드는 서버 코드와 정반대이며 매우 유사합니다.
클라이언트(client.js)
var 소켓 = io.connect('http://localhost');
소켓.on('뉴스', 함수(데이터) {
console.log(데이터);
소켓.emit('다른 이벤트', { my: 'data' });
});
주의할 점은 두 가지입니다. 소켓.io.js 경로를 올바르게 작성해야 합니다. 이 js 파일은 실제로 서버측 node_modules 폴더에 위치하므로 이 파일이 요청되면 리디렉션됩니다. 이 파일이 서버 측에 존재하지 않는다고 놀라지 마세요. 왜 이 파일은 여전히 정상적으로 작동합니까? 물론, 서버 측의 소켓.io.js 파일을 로컬로 복사해서 클라이언트 측의 js 파일로 만들 수도 있습니다. 이렇게 하면 매번 Node 서버에 js 파일을 요청할 필요가 없어 안정성이 향상됩니다. . 두 번째 요점은 var 소켓 = io.connect('website address or ip');를 사용하여 소켓 객체를 얻은 다음 소켓을 사용하여 이벤트를 보내고 받을 수 있다는 것입니다. 이벤트 처리와 관련하여 위 코드는 "뉴스" 이벤트를 수신한 후 수신된 데이터를 인쇄하고 "기타 이벤트" 이벤트를 서버로 전송함을 나타냅니다.
참고: "disconnect"와 같은 내장된 기본 이벤트 이름은 클라이언트 연결이 끊어졌음을 의미하고, "message"는 메시지가 수신되었음을 의미합니다. 불필요한 문제를 피하기 위해 사용자 정의 이벤트 이름은 Socket.IO에 내장된 기본 이벤트 이름과 동일한 이름을 가져서는 안 됩니다.
4. 기타 일반적으로 사용되는 API
1) 모든 클라이언트에 브로드캐스트: 소켓.broadcast.emit('브로드캐스트 메시지');
2) 방에 입장합니다(사용하기 매우 쉽습니다! 이는 네임스페이스와 동일하며 다른 방에 있거나 방에 있지 않은 클라이언트에게 영향을 주지 않고 특정 방에 브로드캐스팅할 수 있습니다). );
3) 방에 메시지를 브로드캐스트합니다(발신자는 메시지를 받을 수 없음): Socket.broadcast.to('방 이름').emit('broadcast room message');
4) 방에 메시지를 브로드캐스트합니다(발신자가 메시지를 받을 수 있음)(이 API는 io.sockets에 속함): io.sockets.in('다른 방 이름').emit('broadcast room message ' );
5) WebSocket 통신 사용을 강제합니다: (클라이언트) 소켓.send('hi'), (서버) 수신하려면 소켓.on('message', function(data){})을 사용합니다.
5. Socket.IO를 사용하여 채팅방 구축
마지막으로 간단한 예를 들어 이번 글을 마치겠습니다. Socket.IO로 채팅방을 구축하려면 약 50줄의 코드만 필요하며, 실시간 채팅 효과도 매우 좋습니다. 키 코드는 아래와 같습니다:
서버(socketChat.js)
//클라이언트 연결 사전, 클라이언트가 서버에 연결될 때
//고유한 소켓 ID가 생성됩니다. 사전은 사용자 정보(닉네임 등)에 대한 소켓 ID 매핑을 저장합니다.
var 연결 목록 = {};
exports.startChat = 함수(io) {
io.sockets.on('connection', 함수(소켓) {
//클라이언트가 연결되면 소켓 ID와 사용자 이름을 저장합니다
var 소켓Id = 소켓.id;
ConnectionList[socketId] = {
소켓: 소켓
};
//사용자가 채팅방 이벤트에 입장하고 자신의 사용자 이름을 다른 온라인 사용자에게 방송합니다.
소켓.on('join', 함수(데이터) {
소켓.broadcast.emit('broadcast_join', data);
연결목록[socketId].username = data.username;
});
//사용자가 채팅방에서 나가면 다른 온라인 사용자에게 자신의 출발을 알리는 이벤트가 발생합니다.
socket.on('disconnect', function () {
If (connectionList[socketId].username) {
소켓.broadcast.emit('broadcast_quit', {
사용자 이름: 연결 목록[socketId].username
});
}
연결 목록 삭제[socketId];
});
//사용자 연설 이벤트, 그의 연설 내용을 다른 온라인 사용자에게 방송
소켓.on('say', 함수(데이터) {
소켓.broadcast.emit('broadcast_say',{
사용자 이름: ConnectionList[socketId].username,
텍스트: data.text
});
});
})
};
클라이언트(socketChatClient.js)
var 소켓 = io.connect('http://localhost');
//서버에 접속한 후 즉시 "가입" 이벤트를 제출하고 다른 사람에게 사용자 이름을 알려주세요
소켓.방출('조인', {
사용자 이름: '사용자 이름 ㅎㅎ'
});
//채팅방 참여 방송 수신 후 메시지 표시
소켓.on('broadcast_join', 함수(데이터) {
console.log(data.username '채팅방에 가입했습니다');
});
//채팅방 나가기 방송 수신 후 메시지 표시
소켓.on('broadcast_quit', function(data) {
console.log(data.username '채팅방에서 나갔습니다');
});
//다른 사람으로부터 메시지를 받은 후 메시지를 표시합니다
소켓.on('broadcast_say', function(data) {
console.log(data.username 'say: ' data.text);
});
//여기서는 텍스트 상자 텍스트 영역과 보내기 버튼이 있다고 가정합니다.btn-send
//jQuery를 사용하여 이벤트 바인딩
$('.btn-send').click(function(e) {
//텍스트 상자의 텍스트 가져오기
var text = $('textarea').val();
//say 이벤트를 제출하면 서버가 이를 수신하면 이를 브로드캐스트합니다
소켓.방출('말하기', {
사용자 이름: '사용자 이름 ㅎㅎ'
텍스트: 텍스트
});
});
간단한 채팅방 DEMO이므로 필요에 따라 확장할 수 있습니다. Socket.IO는 기본적으로 다양한 이벤트의 제출 및 수신 처리 아이디어가 매우 간단합니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
