>웹 프론트엔드 >JS 튜토리얼 >node.js의 소켓.io 학습 튜토리얼 소개(2)

node.js의 소켓.io 학습 튜토리얼 소개(2)

零下一度
零下一度원래의
2017-05-03 10:02:041358검색

Socket.io는 이벤트를 기반으로 실시간 양방향 통신을 제공합니다. 다음 기사에서는 소켓.io의 기본 응용 프로그램에 대한 관련 정보를 주로 소개하며 필요한 모든 사람이 읽을 수 있는 학습 가치가 있습니다. 함께 보세요.

머리말

Socket.IO는 시기적절한 양방향 이벤트 기반 통신을 지원합니다. 모든 플랫폼, 모든 브라우저, 모든 장치에서 동일한 안정성과 속도로 작동합니다.

  • 실시간 분석: 실시간 카운터, 차트 또는 로그 클라이언트로 표시되는 클라이언트에 데이터를 푸시합니다.

  • 실시간 통신 및 채팅: Socket.IO "Hello, World" 채팅 애플리케이션을 작성하려면 코드 몇 줄만 있으면 됩니다.

  • 바이너리 스트리밍 전송: 버전 1.0부터 Socket.IO는 사진, 비디오, 오디오 등 모든 형태의 바이너리 파일 전송을 지원합니다.

  • 문서 병합: 여러 사용자가 동시에 문서를 편집하고 각 사용자가 변경한 내용을 볼 수 있습니다.

서버 및 클라이언트 연결

socket.io는 서버 및 클라이언트 연결 API를 모두 제공합니다

서버 소켓.io는 http.Server 인스턴스를 바인딩해야 합니다

http.Server 바인딩

1. 암시적 바인딩

은 인스턴스화할 때 포트를 전달하거나 인스턴스화 후 청취 또는 연결 기능을 호출하여 암시적으로 바인딩됩니다. Socket.io는 내부적으로 http.Server

을 인스턴스화하고 수신합니다. 인스턴스화할 때 수신 포트

let io = require('socket.io')(3000)

는 수신 또는 연결 기능을 통해 직접 바인딩됩니다. Listen과 ​​Attach는 동의어입니다

let io = require('socket.io') 
io.listen(3000) // io.attach(3000)

2. 디스플레이 바인딩

인스턴스화할 때 바인딩할 http.Server

를 수동으로 지정할 수 있습니다

let server = require('http').Server(); 
let io = require('socket.io')(server)

server.listen(3000)

바인딩

let server = require('http').Server(); 
let io = require('socket.io')()

io.listen(server) // io.attach(server)

server.listen(3000)

Listen 또는 Attach를 통해 express 또는 koa

express

let app = require('express') 
let server = require('http').Server(app) 
let io = require('socket.io')(server)

app.listen(3000)

koa

let app = require('koa')() 
let server = require('http').Server(app.callback())

let io = require('socket.io')(server)

app.listen(3000)

연결 상태 모니터링

서버와 클라이언트가 성공적으로 연결되면 서버는 연결 및 연결 이벤트를 수신하고(연결과 연결은 동의어입니다) 클라이언트는 연결이 끊어지면 클라이언트에 해당하는 서버의 소켓과 클라이언트가 모두 연결 끊김 이벤트를 모니터링합니다.

서버 코드

let server = require('http').Server() 
let io = require('socket.io')(server)

server.listen(3000); 
io.on('connection', socket => { 
 console.log('connect')
 socket.on('disconnect', () => {
 console.log('disconnect')
 })
 socket.disconnect()
})

실행 후 인쇄

connect 
disconnect

클라이언트 코드

let socket = io('http://localhost:3000') 
socket.on('connect', () => { 
 console.log('connect')
})
socket.on('disconnect', () => { 
 console.log('disconnect')
})

실행 후 인쇄

connect 
disconnect

데이터 전송

서버 및 클라이언트 소켓 클라이언트 측에는 연관된 EventEmitter 객체가 있습니다. 클라이언트 소켓에서 보낸 이벤트는 서버 소켓에서 수신할 수 있으며, 서버 소켓에서 보낸 이벤트도 클라이언트에서 수락할 수 있습니다. 이 메커니즘을 기반으로 양방향 통신이 가능합니다.

이제 다음과 같은 상황을 시뮬레이션해 보세요. 클라이언트가 계속해서 난수를 보냅니다. 난수가 0.95보다 크면 서버는 1초를 지연한 다음 클라이언트에 경고와 경고 횟수를 보냅니다.

서버 코드

let server = require('http').Server() 
let io = require('socket.io')(server)

server.listen(3000); 
io.on('connection', socket => { 
 socket.on('random', value => {
 console.log(value)
 if (value > 0.95) {
  if (typeof socket.warning === 'undefined') socket.warning = 0
  setTimeout(() => {
  socket.emit('warn', ++socket.warning)
  }, 1000)
 }
 })
})

소켓 개체는

socket.warning

클라이언트 코드

let socket = io('http://localhost:3000') 
let interval = setInterval(() => { 
 socket.emit('random', Math.random())
}, 500)
socket.on('warn', count => { 
 console.log('warning count: ' + count)
})
socket.on('disconnect', () => { 
 clearInterval(interval)
})

와 같은 상태 정보 및 사용자 정의 데이터를 저장하는 데 사용할 수 있습니다. 전송 스트림

socket.io는 스트림을 처리할 수 있습니다

서버 코드

io.on('connection', function (socket) { 
 let stream = ss.createStream()
 ss(socket).emit('script', stream)
 fs.createReadStream(__filename).pipe(stream)
})

클라이언트 코드

let socket = io('http://localhost:3000') 
ss(socket).on('script', stream => { 
 let buffer = '' 
 stream.on('data', data => {
 buffer += data.toString()
 })
 stream.on('end', () => {
 console.log(buffer)
 })
})

위 내용은 node.js의 소켓.io 학습 튜토리얼 소개(2)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.