suchen

Heim >Web-Frontend >js-Tutorial >Einführung in HTML5 WebSocket 3 – Kenntnisse im Kommunikationsmodell socket.io_javascript

Einführung in HTML5 WebSocket 3 – Kenntnisse im Kommunikationsmodell socket.io_javascript

WBOY
WBOYOriginal
2016-05-16 15:43:482383Durchsuche

Warum wurde socket.io geboren? Bitte beachten Sie die Textbeschreibung unten.

Warum brauchen Sie socket.io?

Node.js bietet eine effiziente serverseitige Betriebsumgebung, aber aufgrund der unterschiedlichen Unterstützung für HTML5 auf der Browserseite, um mit allen Browsern kompatibel zu sein, ein hervorragendes Echtzeit-Benutzererlebnis zu bieten und Clients und bereitzustellen Dienstleistungen für Programmierer Um ein konsistentes Programmiererlebnis zu bieten, wurde socket.io geboren.

Das Designziel von socket.io besteht darin, jeden Browser und jedes mobile Gerät zu unterstützen. Unterstützt derzeit gängige PC-Browser (IE, Safari, Chrome, Firefox, Opera usw.) und mobile Browser (iPhone Safari/iPad Safari/Android WebKit/WebOS WebKit usw.).

Socket.io basiert auf node.js und vereinfacht die WebSocket-API, indem es verschiedene Kommunikations-APIs vereinheitlicht. Es unterstützt: WebSocket, Flash Socket, AJAX Long-Polling, AJAX Multipart Streaming, Forever IFrame, JSONP-Polling.

Socket.io löst Echtzeit-Kommunikationsprobleme und vereinheitlicht die Programmiermethoden von Server und Client. Nach dem Starten des Sockets ist es so, als würde eine Pipeline zwischen dem Client und dem Server eingerichtet, und die beiden Seiten können miteinander kommunizieren.

Installieren

In der Befehlszeile ausführen: npm install socket.io zum Installieren.

Serverseitiges Programmiermodell

Die serverseitige Programmierung ist immer noch die gleiche wie bei einem normalen Server: Starten des Servers, Bereitstellen von Diensten und Verarbeiten von Ereignissen.

Zum Beispiel die folgende server.js: 

var http = require('http')
  , url = require('url')
  , fs = require('fs')
  , server;
server = http.createServer(function(req, res){
  // your normal server code
  var path = url.parse(req.url).pathname;
  switch (path){
  case '/':
   res.writeHead(200, {'Content-Type': 'text/html'});
   res.write('<h1>Hello! Try the <a href="/index.html">Socket.io Test</a></h1>');
   res.end();
   break;
  case '/index.html':
   fs.readFile(__dirname + path, function(err, data){
    if (err) return send404(res);
    res.writeHead(200, {'Content-Type': path == 'json.js' &#63; 'text/javascript' : 'text/html'})
    res.write(data, 'utf8');
    res.end();
   });
   break;
  default: send404(res);
  }
}),
send404 = function(res){
  res.writeHead(404);
  res.write('404');
  res.end();
};
server.listen(8080);
var io = require('socket.io').listen(server);
io.sockets.on('connection', function(socket){
 console.log("Connection " + socket.id + " accepted.");
 socket.on('message', function(message){
    console.log("Received message: " + message + " - from client " + socket.id);
 });
 socket.on('disconnect', function(){
  console.log("Connection " + socket.id + " terminated.");
 });
});

Client-Programmiermodell

Auch die Client-Programmierung wird auf ähnliche Weise gehandhabt, indem sie eine Verbindung zum Server herstellt und Informationen austauscht.

Zum Beispiel die folgende index.html-Seite: 

<!doctype html>
<html>
 <head>
  <title>Socket.io Test</title>
  <script src="/json.js"></script> <!-- for ie -->
  <script src="/socket.io/socket.io.js"></script>
 </head>
 <body>  
  <script>    
  var socket;
  var firstconnect = true;
  function connect() {
   if(firstconnect) {
    socket = io.connect(null);
    socket.on('message', function(data){ message(data); });
    socket.on('connect', function(){ status_update("Connected to Server"); });
    socket.on('disconnect', function(){ status_update("Disconnected from Server"); });
    socket.on('reconnect', function(){ status_update("Reconnected to Server"); });
    socket.on('reconnecting', function( nextRetry ){ status_update("Reconnecting in " 
     + nextRetry + " seconds"); });
    socket.on('reconnect_failed', function(){ message("Reconnect Failed"); });
    firstconnect = false;
   }
   else {
    socket.socket.reconnect();
   }
  }
  function disconnect() {
   socket.disconnect();
  }
  function message(data) {
   document.getElementById('message').innerHTML = "Server says: " + data;
  }
  function status_update(txt){
   document.getElementById('status').innerHTML = txt;
  }
  function esc(msg){
   return msg.replace(/</g, '<').replace(/>/g, '>');
  }
  function send() {
   socket.send("Hello Server!");  
  };    
  </script>
  <h1>Socket.io Test</h1>
  <div><p id="status">Waiting for input</p></div>
  <div><p id="message"></p></div> 
  <button id="connect" onClick='connect()'/>Connect</button>
  <button id="disconnect" onClick='disconnect()'>Disconnect</button>
  <button id="send" onClick='send()'/>Send Message</button>
 </body>
</html>

Notizen

1. Um den Server zu starten, öffnen Sie das Befehlszeilenfenster, navigieren Sie zu dem Ordner, in dem sich server.js befindet, und geben Sie node server.js ein, um den Server zu starten.

Achten Sie in der index.html oben auf diese Zeile: 73b0576f9b2d9a4f6808f937210380782cacc6d41bbb37262a98f745aa00fbf0. Wenn Sie das lokale socket.io-Skript nicht verwenden möchten, können Sie

Um das folgende öffentliche Skript direkt zu verwenden: 

<script src="http://cdn.socket.io/stable/socket.io.js"></script>

Beachten Sie auch diese Zeile: socket = io.connect(null).

Die Null stellt hier eine Verbindung zum lokalen Dienst dar, der durch „localhost“ ersetzt werden kann und den gleichen Effekt hat.

2. Sie können socket.io verwenden, um den http-Dienst direkt zu starten.

Zum Beispiel: 

var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 io.sockets.emit('this', { will: 'be received by everyone'});
});

3. Socket.io kann Nachrichten direkt über die Sendemethode senden und Nachrichten mithilfe des Nachrichtenereignisses empfangen, zum Beispiel: 

//server.js
var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 socket.on('message', function () { });
});
//index.html
<script>
 var socket = io.connect('http://localhost/');
 socket.on('connect', function () {
  socket.send('hi');
  socket.on('message', function (msg) {
   // my msg
  });
 });
</script>

4. Senden und Verarbeiten von Daten

Beide Enden können Ereignisse aneinander senden, Daten aneinander senden und miteinander kommunizieren. Der Code zum Senden des Ereignisses lautet: socket.emit(action, data, function), wobei action der Name des Ereignisses, data die Daten und function die Rückruffunktion ist. Der Code zum Verarbeiten des Ereignisses lautet: socket. on(action, function), if emit sends Wenn Daten vorhanden sind, enthalten die Parameter in der Funktion diese Daten. Zusätzlich zum Senden und Verarbeiten integrierter Ereignisse bietet socket.io beispielsweise „Verbinden“, „Trennen“ und „Nachricht“. Ermöglicht auch das Senden und Bearbeiten benutzerdefinierter Ereignisse, wie zum Beispiel:

//Server: 

io.sockets.on('connection', function (socket) {
 socket.emit('news', { hello: 'world' });
 socket.on('my other event', function (data) {
  console.log(data);
 });
});

//Kunde: 

<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>

5. Wie aus dem Obigen hervorgeht, können beim Senden von Daten sowohl Senden als auch Emittieren verwendet werden. Es ist nur so, dass Emit die Verarbeitung benutzerdefinierter Ereignisse stärkt.

6. Sie können die get/set-Methode von socket auf der Serverseite verwenden, um relevante Daten auf der Clientseite zu speichern, zum Beispiel:

//Server

var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 socket.on('set nickname', function (name) {
  socket.set('nickname', name, function () { socket.emit('ready'); });
 });
 socket.on('msg', function () {
  socket.get('nickname', function (err, name) {
   console.log('Chat message by ', name);
  });
 });
});

//Kunde

<script>
 var socket = io.connect('http://localhost');
 socket.on('connect', function () {
  socket.emit('set nickname', confirm('What is your nickname&#63;'));
  socket.on('ready', function () {
   console.log('Connected !');
   socket.emit('msg', confirm('What is your message&#63;'));
  });
 });
</script>

7. Sie können Nachrichten senden, z. B. an alle im Chatraum mit Ausnahme der aktuellen Socket-Verbindung. 

var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 socket.broadcast.emit('user connected');
});

8. Anstatt mehrere Links einzurichten, können mehrere unabhängige Kanäle in derselben Verbindung eingerichtet werden. Dieser offizielle Name ist „mehrere Namespaces“, wie im offiziellen Beispiel: 

var io = require('socket.io').listen(80);
//Server
var chat = io
 .of('/chat')
 .on('connection', function (socket) {
  socket.emit('a message', {
    that: 'only'
   , '/chat': 'will get'
  });
  chat.emit('a message', {
    everyone: 'in'
   , '/chat': 'will get'
  });
 });
var news = io
 .of('/news')
 .on('connection', function (socket) {
  socket.emit('item', { news: 'item' });
 });
//Client
<script>
 var chat = io.connect('http://localhost/chat')
  , news = io.connect('http://localhost/news');
 chat.on('connect', function () {
  chat.emit('hi!');
 });
 news.on('news', function () {
  news.emit('woot');
 });
</script>

socket.io-Konfiguration

Die Konfiguration von socket.io ist sehr einfach. Wenn Sie Express konfiguriert haben, werden Sie feststellen, dass sie fast die gleiche Methode verwenden. Schauen wir uns zunächst ein kleines Beispiel an: 

var io = require('socket.io').listen(80);
io.configure('production', function(){
 io.enable('browser client etag');
 io.set('log level', 1);
 io.set('transports', [
  'websocket'
 , 'flashsocket'
 , 'htmlfile'
 , 'xhr-polling'
 , 'jsonp-polling'
 ]);
});
io.configure('development', function(){
 io.set('transports', ['websocket']);
});

Wie Sie sehen können, verwendet socket.io für die Konfiguration die Funktionen „Konfigurieren“, „Setzen“, „Aktivieren“ und „Deaktivieren“.

1. Verwenden Sie die Konfigurationsmethode, um das Verhalten in verschiedenen Betriebsumgebungen zu konfigurieren. Der erste Parameter von configure ist die laufende Umgebung und der zweite Parameter ist die Funktion zur Konfiguration. Die laufende Umgebung ist typischerweise eine Produktions- oder Entwicklungsumgebung. Natürlich kann hier jede beliebige Zeichenfolge verwendet werden. Wenn der erste Parameter von configure weggelassen wird, bedeutet dies, dass die nachfolgende Konfiguration unabhängig von der Umgebung öffentlich und gültig ist.

2. Wie legen Sie nach der Konfiguration verschiedener Betriebsumgebungen fest, in welcher Umgebung es derzeit ausgeführt wird? Dies wird erreicht, indem der Wert der Umgebungsvariablen NODE_ENV in der Befehlszeile geändert wird.

3. In der Konfigurationsfunktion können wir Set, Enable und Disable verwenden, um verwandte Optionen festzulegen.

4. Referenz für bestimmte konfigurierbare Elemente: https://github.com/LearnBoost/Socket.IO/wiki/Configuring-Socket.IO
Praktische Referenz

Socket.io-Einführung: http://davidchambersdesign.com/getting-started-with-socket.io/

Installations- und Nutzungsanweisungen für socket.io: http://socket.io/

socket.io Wiki: https://github.com/LearnBoost/Socket.IO/wiki

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery realisiert die automatische 360-Grad-Rotation des Produkts, um den Quellcode für Spezialeffekte zu teilen_jqueryNächster Artikel：jQuery realisiert die automatische 360-Grad-Rotation des Produkts, um den Quellcode für Spezialeffekte zu teilen_jquery

In Verbindung stehende Artikel

Mehr sehen