Nodejs 웹 소켓 실현 4 가지 방식
자바 script 을 서버 스 크 립 트 로 어떻게 활용 하 는 지, Nodejs 프레임 워 크 웹 을 통 해 개발 하 는 방법 을 소개 합 니 다.Nodejs 프레임 워 크 는 V8 기반 엔진 으로 현재 속도 가 가장 빠 른 자바 script 엔진 입 니 다.chrome 브 라 우 저 는 V8 을 기반 으로 20 - 30 개의 웹 페이지 를 동시에 열 면 원활 합 니 다.Nodejs 표준 웹 개발 프레임 워 크 Express 는 PHP 보다 개발 효율 이 높 고 학습 곡선 이 낮 습 니 다.작은 사이트, 맞 춤 형 사이트, 우리 자신의 Geek 사이트 에 매우 적합 합 니 다!!
저자
장단 (Conan), 프로그래머 자바, R, PHP, 자 바스 크 립 트 weibo：@Conan_Z
blog: http://blog.fens.me
email: [email protected]
전재 출처 를 밝 혀 주 십시오:http://blog.fens.me/nodejs-websocket/
머리말
웹 소켓 은 HTML 5 가 제공 하기 시작 한 브 라 우 저 와 서버 간 의 듀 플 렉 스 통신 을 위 한 네트워크 기술 이다.웹 소켓 API 에서 브 라 우 저 와 서버 는 악수 (handshaking) 동작 만 하면 브 라 우 저 와 서버 사이 에 빠 른 채널 이 형성 된다.둘 사이 에 데 이 터 를 서로 전송 할 수 있다.
웹 소켓 은 서버 와 클 라 이언 트 로 나 뉘 는 통신 프로 토 콜 입 니 다.서버 를 배경 에 두 고 클 라 이언 트 와 의 긴 연결 을 유지 하 며 쌍방 이 통신 하 는 임 무 를 완성 합 니 다.클 라 이언 트 는 일반적으로 HTML 5 브 라 우 저 를 지원 하 는 핵심 에서 자바 script API 를 제공 하여 웹 페이지 를 사용 하면 웹 소켓 연결 을 만 들 수 있 습 니 다.자바 구현 사례 참고: 자바 현실 웹 소켓
오늘 은 nodejs 에서 웹 소켓 의 통신 을 어떻게 실현 하 는 지 살 펴 보 자.
목차
왜 Nodejs 를 사용 합 니까?
node - websocket - server: 테스트 실패 node - websocket: 테스트 성공 faye - websocket - node: 테스트 성공 socket. io: 테스트 성공 최종 총화 1. 왜 Nodejs 를 사용 합 니까?
1. 이벤트 구동 은 폐쇄 를 통 해 클 라 이언 트 의 생명 활성 기 를 쉽게 실현 할 수 있 습 니 다.2. 다 중 스 레 드, 잠 금, 병렬 계산 문 제 는 걱정 하지 마 세 요. 3. V8 엔진 속도 가 매우 빠 릅 니 다. 4. 게임 에 있어 게임 논리 코드 를 한 번 쓰 면 전단 백 엔 드 가 통 용 됩 니 다.
물론 Nodejs 도 단점 이 있다. 1. nodejs 업데이트 가 빠 르 고 버 전 호환성 이 나타 날 수 있다. 2. nodejs 는 아직 성숙 하지 않 고 아직 크게 제작 되 지 않 았 다.3. nodejs 는 다른 서버 와 달리 서로 다른 연결 에 대해 프로 세 스 와 스 레 드 작업 을 지원 하지 않 습 니 다.
Nodejs 가 우리 에 게 무한 하고 쾌적 한 개발 을 가 져 다 주 는 것 을 저울질 하 는 동시에 그의 미숙 함, 특히 '긴 연결' 에 대한 인터넷 통신 응용 을 고려 해 야 한다.다음은 인터넷 의 몇 가지 Nodejs 가 웹 소켓 을 실현 하 는 프레임 워 크 를 각각 테스트 해 보 겠 습 니 다.
나의 시스템 환경
win7 64bit
Nodejs:v0.10.5
Npm:1.2.19
~ D:\workspace\javascript>node -v v0.10.5 ~ D:\workspace\javascript>npm -v 1.2.192. node - websocket - server: 테스트 실패
github: https://github.com/miksago/node-websocket-server node - websocket - server: nodejs 바 텀 API 를 기반 으로 이 루어 졌 습 니 다. 호 환 되 지 않 을 확률 은 90 - 100% 입 니 다. 이 제 는 더 이상 사용 하 는 것 을 권장 하지 않 습 니 다.코드 라 이브 러 리 를 찾 아 보 니 2 년 동안 업데이트 되 지 않 았 기 때문에 node - websocket - server 프레임 워 크 를 사용 할 준 비 를 하고 있 습 니 다. 특히 조심 하 세 요.
나 도 실험 을 하나 했 는데, 줄곧 잘못 보고 할 것 이 니, 실험 코드 를 붙 여 라.
~ D:\workspace\javascript>mkdir nodejs-websocket-server ~ D:\workspace\javascript>cd nodejs-websocket-server ~ D:\workspace\javascript
odejs-websocket-server>npm install websocket-server npm http GET https://registry.npmjs.org/websocket-server npm http 304 https://registry.npmjs.org/websocket-server npm http GET https://registry.npmjs.org/websocket-server/-/websocket-server-1.4.04.tgz npm http 200 https://registry.npmjs.org/websocket-server/-/websocket-server-1.4.04.tgz [email protected] node_modules\websocket-server ~ vi app.js var conns = new Array(); var ws = require("websocket-server"); var server = ws.createServer(); server.addListener("connection", function(connection){ console.log("Connection request on Websocket-Server"); conns.push(connection); connection.addListener('message',function(msg){ console.log(msg); for(var i=0; i<conns.length; i++){ if(conns[i]!=connection){ conns[i].send(msg); } } }); }); server.listen(3001); 클 라 이언 트 연결:
<html> <body> <div id="output"></div> <script> function checkBrowser(){ if (window.WebSocket){ log("This browser supports WebSocket!"); } else { log("This browser does not support WebSocket."); } } function setup(){ var wsServer = 'ws://localhost:3001'; var ws = new WebSocket(wsServer); ws.onopen = function (e) { log("Connected to WebSocket server.",e); sendMessage("Conan"); } ; ws.onclose = function (e) { log("Disconnected",e); } ; ws.onmessage = function(e) { log("RECEIVED: " + e.data, e); ws.close(); } ws.onerror = function (e) { log('Error occured: ' + e.data,e); } ; var sendMessage = function(msg){ ws.send(msg); log("SEND : "+ msg); } } function log(s,e) { var output = document.getElementById("output"); var p = document.createElement("p"); p.style.wordWrap = "break-word"; p.style.padding="10px"; p.style.background="#eee"; p.textContent = "LOG : "+s; output.appendChild(p); console.log("LOG : "+s, e); } checkBrowser(); setup(); </script> </body> </html> 오류 알림:
원인 을 찾 아 보 니 node - websocket - server 는 websocket 의 draft - 10 을 지원 하지 않 고 chrome 14 + 브 라 우 저 는 draft - 10 의 websocket 만 지원 합 니 다. 그러면 chrome 은 기본적으로 사용 할 수 없습니다.제 chrome 버 전 은 28.0.1500.95 입 니 다.그 러 니까 생각 을 바 꿔 보 세 요!
3. WebSocket - Code: 테스트 성공
github: https://github.com/Worlize/WebSocket-Node WebSocket - Node 는 draft - 10 뿐만 아니 라 이전 버 전도 지원 하 는 간단 한 라 이브 러 리 입 니 다.
서버 쪽 설정
~ D:\workspace\javascript>mkdir nodejs-websocket ~ D:\workspace\javascript>cd nodejs-websocket D:\workspace\javascript
odejs-websocket>npm install websocket npm http GET https://registry.npmjs.org/websocket npm http 304 https://registry.npmjs.org/websocket > [email protected] install D:\workspace\javascript
odejs-websocket
ode_modules\websocket > node install.js [websocket v1.0.8] Attempting to compile native extensions. [websocket v1.0.8] Native code compile failed!! Please note that this module DOES NOT REQUIRE the native components and will still work without them, though not quite as efficiently. On Windows, native extensions require Visual Studio and Python. On Unix, native extensions require Python, make and a C++ compiler. Start npm with --websocket:verbose to show compilation output (if any). [email protected] node_modules\websocket 위 에서 제시 한 오류 가 있 습 니 다. 저 는 이 컴퓨터 에 Visual Studio 와 Python 을 설 치 했 습 니 다. 보아하니 일부 모듈 은 로 컬 컴 파일 에 성공 하지 못 한 것 같 습 니 다.
app. js 추가
~ vi app.js // http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/ "use strict"; // Optional. You will see this name in eg. 'ps' or 'top' command process.title = 'node-chat'; // Port where we'll run the websocket server var webSocketsServerPort = 3001; // websocket and http servers var webSocketServer = require('websocket').server; var http = require('http'); /** * Global variables */ // latest 100 messages var history = [ ]; // list of currently connected clients (users) var clients = [ ]; /** * Helper function for escaping input strings */ function htmlEntities(str) { return String(str).replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"'); } // Array with some colors var colors = [ 'red', 'green', 'blue', 'magenta', 'purple', 'plum', 'orange' ]; // ... in random order colors.sort(function(a,b) { return Math.random() > 0.5; } ); /** * HTTP server */ var server = http.createServer(function(request, response) { // Not important for us. We're writing WebSocket server, not HTTP server }); server.listen(webSocketsServerPort, function() { console.log((new Date()) + " Server is listening on port " + webSocketsServerPort); }); /** * WebSocket server */ var wsServer = new webSocketServer({ // WebSocket server is tied to a HTTP server. WebSocket request is just // an enhanced HTTP request. For more info http://tools.ietf.org/html/rfc6455#page-6 httpServer: server }); // This callback function is called every time someone // tries to connect to the WebSocket server wsServer.on('request', function(request) { console.log((new Date()) + ' Connection from origin ' + request.origin + '.'); // accept connection - you should check 'request.origin' to make sure that // client is connecting from your website // (http://en.wikipedia.org/wiki/Same_origin_policy) var connection = request.accept(null, request.origin); // we need to know client index to remove them on 'close' event var index = clients.push(connection) - 1; var userName = false; var userColor = false; console.log((new Date()) + ' Connection accepted.'); // send back chat history if (history.length > 0) { connection.sendUTF(JSON.stringify( { type: 'history', data: history} )); } // user sent some message connection.on('message', function(message) { if (message.type === 'utf8') { // accept only text if (userName === false) { // first message sent by user is their name // remember user name userName = htmlEntities(message.utf8Data); // get random color and send it back to the user userColor = colors.shift(); connection.sendUTF(JSON.stringify({ type:'color', data: userColor })); console.log((new Date()) + ' User is known as: ' + userName + ' with ' + userColor + ' color.'); } else { // log and broadcast the message console.log((new Date()) + ' Received Message from ' + userName + ': ' + message.utf8Data); // we want to keep history of all sent messages var obj = { time: (new Date()).getTime(), text: htmlEntities(message.utf8Data), author: userName, color: userColor }; history.push(obj); history = history.slice(-100); // broadcast message to all connected clients var json = JSON.stringify({ type:'message', data: obj }); for (var i=0; i < clients.length; i++) { clients[i].sendUTF(json); } } } }); // user disconnected connection.on('close', function(connection) { if (userName !== false && userColor !== false) { console.log((new Date()) + " Peer " + connection.remoteAddress + " disconnected."); // remove user from the list of connected clients clients.splice(index, 1); // push back user's color to be reused by another user colors.push(userColor); } }); }); 시작 서버
~ D:\workspace\javascript
odejs-websocket>node app.js Warning: Native modules not compiled. XOR performance will be degraded. Warning: Native modules not compiled. UTF-8 validation disabled. Wed Aug 21 2013 15:28:48 GMT+0800 ( ) Server is listening on port 3001 Wed Aug 21 2013 15:28:53 GMT+0800 ( ) Connection from origin null. Wed Aug 21 2013 15:28:53 GMT+0800 ( ) Connection accepted. Wed Aug 21 2013 15:28:53 GMT+0800 ( ) User is known as: Conan with red color. Wed Aug 21 2013 15:28:53 GMT+0800 ( ) Peer undefined disconnected. 우 리 는 XOR 와 UTF - 8 vaidation 두 모듈 이 금지 되 어 있 지만 테스트 에 영향 을 주지 않 는 것 을 보 았 다.
클 라 이언 트, 똑 같이 사용 합 니 다.
또한 웹 소켓 - 노드 는 브 라 우 저 를 사용 하지 않 아 도 되 는 C / S 모드 의 상호작용 도 제공한다.
서버 코드
~ vi app2.js #!/usr/bin/env node var WebSocketServer = require('websocket').server; var http = require('http'); var server = http.createServer(function(request, response) { console.log((new Date()) + ' Received request for ' + request.url); response.writeHead(404); response.end(); }); server.listen(3001, function() { console.log((new Date()) + ' Server is listening on port 3001'); }); wsServer = new WebSocketServer({ httpServer: server, // You should not use autoAcceptConnections for production // applications, as it defeats all standard cross-origin protection // facilities built into the protocol and the browser. You should // *always* verify the connection's origin and decide whether or not // to accept it. autoAcceptConnections: false }); function originIsAllowed(origin) { // put logic here to detect whether the specified origin is allowed. return true; } wsServer.on('request', function(request) { if (!originIsAllowed(request.origin)) { // Make sure we only accept requests from an allowed origin request.reject(); console.log((new Date()) + ' Connection from origin ' + request.origin + ' rejected.'); return; } var connection = request.accept('echo-protocol', request.origin); console.log((new Date()) + ' Connection accepted.'); connection.on('message', function(message) { if (message.type === 'utf8') { console.log('Received Message: ' + message.utf8Data); connection.sendUTF(message.utf8Data); } else if (message.type === 'binary') { console.log('Received Binary Message of ' + message.binaryData.length + ' bytes'); connection.sendBytes(message.binaryData); } }); connection.on('close', function(reasonCode, description) { console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.'); }); }); 클 라 이언 트 코드
~ vi client.js #!/usr/bin/env node var WebSocketClient = require('websocket').client; var client = new WebSocketClient(); client.on('connectFailed', function(error) { console.log('Connect Error: ' + error.toString()); }); client.on('connect', function(connection) { console.log('WebSocket client connected'); connection.on('error', function(error) { console.log("Connection Error: " + error.toString()); }); connection.on('close', function() { console.log('echo-protocol Connection Closed'); }); connection.on('message', function(message) { if (message.type === 'utf8') { console.log("Received: '" + message.utf8Data + "'"); } }); function sendNumber() { if (connection.connected) { var number = Math.round(Math.random() * 0xFFFFFF); connection.sendUTF(number.toString()); setTimeout(sendNumber, 1000); } } sendNumber(); }); client.connect('ws://localhost:3001/', 'echo-protocol'); 프로그램 시작:
~ D:\workspace\javascript
odejs-websocket>node app2.js ~ D:\workspace\javascript
odejs-websocket>node client.js 테스트 성공!!
4. faye - websocket - node: 테스트 성공
github: https://github.com/faye/faye-websocket-node faye - websocket - node 는 faye 프로젝트 를 확장 하여 개발 한 websocket 의 실현 입 니 다.
서버 쪽 설정
~ D:\workspace\javascript>mkdir nodejs-faye-websocket ~ D:\workspace\javascript>cd nodejs-faye-websocket ~ D:\workspace\javascript
odejs-faye-websocket>npm install faye-websocket npm http GET https://registry.npmjs.org/faye-websocket npm http 304 https://registry.npmjs.org/faye-websocket npm http GET https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.6.1.tgz npm http 200 https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.6.1.tgz npm http GET https://registry.npmjs.org/websocket-driver npm http 200 https://registry.npmjs.org/websocket-driver npm http GET https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.2.2.tgz npm http 200 https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.2.2.tgz [email protected] node_modules\faye-websocket └── [email protected] ~ vi app.js var WebSocket = require('faye-websocket'), http = require('http'); var server = http.createServer(); server.on('upgrade', function(request, socket, body) { if (WebSocket.isWebSocket(request)) { var ws = new WebSocket(request, socket, body); ws.on('message', function(event) { ws.send(event.data); }); ws.on('close', function(event) { console.log('close', event.code, event.reason); ws = null; }); } }); server.listen(3001); ~ D:\workspace\javascript
odejs-faye-websocket>node app.js 웹 클 라 이언 트 로 접근:
테스트 성공, 아주 간단 합 니 다!!그리고 다른 창고 에 의존 하지 않 았 어!!
5. socket. io: 테스트 성공
github: https://github.com/LearnBoost/socket.io
환경 설정
~ D:\workspace\javascript>express -e nodejs-socketio ~ D:\workspace\javascript>cd nodejs-socketio && npm install ~ D:\workspace\javascript
odejs-socketio>npm install socket.io app. js 프로필 수정
~ vi app.js var app = require('express')() , server = require('http').createServer(app) , io = require('socket.io').listen(server); server.listen(80); app.get('/', function (req, res) { res.sendfile(__dirname + '/client/index.html'); }); io.sockets.on('connection', function (socket) { socket.emit('news', { hello: 'world' }); socket.on('my other event', function (data) { console.log(data); }); }); "클 라 이언 트 파일 을 추가 합 니 다. 이 index. html 는 app. js 가 지정 한 위치 에 따라" res. sendfile ( dirname + "/ client / index. html") 을 주의 하 십시오. "
~ mkdir client ~ vi /client/index.html <!DOCTYPE html> <html> <head> <title>socket.io</title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <h1>socket.io</h1> <p>Welcome to socket.io</p> <script src="/socket.io/socket.io.js"></script> <script> var socket = io.connect('http://localhost'); socket.on('news', function (data) { console.log(data); socket.emit('my other event', { my: 'data' }); }); </script> </body> </html> 시작 서버
~ D:\workspace\javascript
odejs-socketio>node app.js info - socket.io started 브 라 우 저 열기:http://localhost
서버 로그 보기:
debug - served static content /socket.io.js debug - client authorized info - handshake authorized ZR-xQhsKCCqM03TRHW4b debug - setting request GET /socket.io/1/websocket/ZR-xQhsKCCqM03TRHW4b debug - set heartbeat interval for client ZR-xQhsKCCqM03TRHW4b debug - client authorized for debug - websocket writing 1:: debug - websocket writing 5:::{"name":"news","args":[{"hello":"world"}]} { my: 'data' } debug - emitting heartbeat for client ZR-xQhsKCCqM03TRHW4b debug - websocket writing 2:: debug - set heartbeat timeout for client ZR-xQhsKCCqM03TRHW4b debug - got heartbeat packet debug - cleared heartbeat timeout for client ZR-xQhsKCCqM03TRHW4b debug - set heartbeat interval for client ZR-xQhsKCCqM03TRHW4b 테스트 성공.
6. 최종 총화
오늘 은 nodejs 기반 웹 소켓 프레임 워 크 4 가 지 를 시도 했다.
node - websocket - server: 직접 포기 한 거 야.
node - websocket: 바 텀 C +, Python 환경 에 의존 하여 node 로 클 라 이언 트 의 접근 을 지원 해 야 합 니 다.
faye - websocket - node: faye 소프트웨어 프레임 워 크 시스템 의 일부분 으로 설치 가 간단 하 며 다른 의존 라 이브 러 리 가 필요 없습니다.
socket. io: 기능 이 강하 고 웹 socket 서버 엔 드 와 Express 3 프레임 워 크 를 통합 하 는 것 을 지원 합 니 다.
웹 socket 저도 처음 시도 합 니 다. 개발 효율, 코드 구조, 안정성, 서버 성능 에 대해 더 많은 테스트 를 해 야 합 니 다.어떤 프레임 이 가장 좋 은 지 는 아직 정설 할 수 없 지만, 나 는 socket. io 와 faye - websocket - node 의 미래 전망 을 비교적 좋아한다.
전재 출처 를 밝 혀 주 십시오:http://blog.fens.me/nodejs-websocket/
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
