理解socket.io(一)---相關的API

時間 2019-11-12

原文原文鏈接

理解socket.io(一)---相關的API html

1. 什麼是Socket.IO?
Socket.IO是node.js的一個模塊，它用於瀏覽器與服務端之間實時通訊。它提供了服務器和客戶端的組件，只需一個模塊就能夠給應用程序對webSocket的支持。Socket.IO解決了各個瀏覽器支持的問題。node

2. Socket.IO支持以下方式進行通訊，會根據瀏覽器的支持程度，自動選擇使用哪一種技術進行通訊：git

WebSocket
Flash Socket
AJAX long-polling
AJAX multiple streaming
Forever IFrame
JSONP polling

3. Socket.IO的APIgithub

// 監聽客戶端鏈接，回調函數會傳遞本次鏈接的socket
io.on('connection', function(socket){}); 

// 給全部客戶端廣播消息
io.sockets.emit('event_name', data); 

// 給指定的客戶端發送消息
io.sockets.socket(socketid).emit('event_name', data);

// 監聽發送的消息
socket.on('event_name', function(data) {});

// 給該socket的客戶端發送消息
socket.emit('event_name', data);

// 給除了本身之外的客戶端廣播消息
socket.broadcast.emit("event_name", data);

客戶端：web

1. 創建一個socket鏈接
var socket = io("ws:///xxxxx");npm

2. 監聽服務消息json

socket.on('msg', function(data) {
  socket.emit('msg', {xx: xx1}); // 向服務器發送消息
  console.log(data);
});

3. 監聽socket斷開瀏覽器

socket.on('disconnect', function(){
  console.log('與服務器斷開');
});

4. 監聽socket的重連服務器

socket.on('reconnect', function() {
  console.log('從新鏈接到服務器');
});

客戶端socket.on()監聽的事件：websocket

connect: 鏈接成功
connecting: 正在鏈接
disconnect: 斷開鏈接
connect_failed: 鏈接失敗
error: 發生錯誤
message: 接收到消息事件
reconnect_failed: 重連失敗
reconnect: 重連成功
reconnecting: 正在重連

1-1：給當前的客戶端發送消息的demo

下面咱們簡單的來看一個demo，頁面有一個文本域和一個按鈕，點擊按鈕後。
首先須要安裝一下 socket.io;
命令行以下：

npm install --save socket.io

如下是項目中package.json，以下：

{
  "name": "socket-demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "socket.io": "^2.1.0"
  },
  "devDependencies": {
    "fs": "0.0.1-security",
    "http": "0.0.0"
  }
}

html代碼以下：

<!DOCTYPE html>
<html>
  <head>
    <title>socket.io node.js</title>
    <style>
      
    </style>
  </head>
  <body>
    <h1>socket.io</h1>
    <form action="#" id="form">
      <textarea id="message" cols="30" rows="10"></textarea>
      <input type="submit" value="send message" id="submit"/>
    </form>
    <script src="http://localhost:3000/socket.io/socket.io.js"></script>
    <script>
      var socket = io.connect('http://127.0.0.1:3000');
      var msg = document.getElementById('message');
      var submit = document.getElementById('submit');
      submit.onclick = function(e) {
        socket.emit('msg', {text: msg.value});  // 發生textarea的值給服務器
        return false;
      };
      // 監聽msg事件
      socket.on('msg', function(data) {
        console.log(data);
      })
    </script>
  </body>
</html>

app.js代碼以下：

var http = require('http');
var fs = require('fs');

var server = http.createServer(function(res, res) {
  fs.readFile('./index.html', function(err, data){
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(data, 'utf-8');
  })
}).listen(3000, '127.0.0.1');

console.log('server running at http://127.0.0.1:3000');

var io = require('socket.io').listen(server);

io.sockets.on('connection', function(socket) {
  // 偵聽客戶端的msg事件
  socket.on('msg', function(data) { 
    // 給除了本身之外的客戶端廣播消息
    // socket.broadcast.emit('msg', data);
    
    // 給當前的客戶端發送消息
    socket.emit('msg', data);
  })
  
});

進入對應的項目，命令行運行 node app.js，而後在瀏覽器下運行 http://127.0.0.1:3000/ 後便可，發送消息後，在控制檯看到能監聽到消息；

簡單代碼分析：
首先是經過點擊按鈕，獲取到文本域的值，而後使用 socket.emit('msg', {text: msg.value}); 發送消息，服務器端(也就是app.js)代碼內經過
io.sockets.on('connection', function(socket) {}), 該函數能監聽客戶端鏈接，而後使用 socket.on('msg', function(data) {}）能監聽到客戶端的msg事件，
最後經過 socket.emit('msg', data); 給客戶端發送消息，最後客戶端經過以下代碼就能監聽服務端回來的消息。

// 監聽msg事件
socket.on('msg', function(data) {
  console.log(data);
})
// 所以 整個代碼以下：
io.sockets.on('connection', function(socket) {
  // 偵聽客戶端的msg事件
  socket.on('msg', function(data) {
    // 給當前的客戶端發送消息
    socket.emit('msg', data);
  })
})

github查看源碼

1-2: 若是想給除了本身之外的客戶端廣播消息

能夠把上面客戶端的代碼 socket.emit('msg', data); 改爲 socket.broadcast.emit('msg', data);
所以打開瀏覽器訪問http://127.0.0.1:3000，同時打開另外一個瀏覽器或者多個瀏覽器，瀏覽http://127.0.0.1：3000，當在第一個標籤頁的發送消息的時候，在第二個標籤頁面或其餘標籤頁面的控制檯能夠看到消息。

1-3：若是想給當前全部的客戶端都發送消息的話，須要發送廣播消息，代碼能夠改爲以下：

io.sockets.on('connection', function(socket) {
  // 偵聽客戶端的msg事件
  socket.on('msg', function(data) { 
    // 給除了本身之外的客戶端廣播消息
    socket.broadcast.emit('msg', data);

    // 給當前的客戶端發送消息
    socket.emit('msg', data);
  })
});

二. 實現一個簡單的計數器來監聽服務器上所鏈接客戶端的數量。

思路是：當服務器啓動後，計算器是從0開始，當打開瀏覽器訪問http://127.0.0.1:3000後，客戶端鏈接到服務器時它就增長1，當關閉一個瀏覽器時，它就
減小1。這或是能夠理解爲站點實時統計訪問者的數據的一個簡單的列子吧。

app.js 代碼以下：

var http = require('http');
var fs = require('fs');
var count = 0;

var server = http.createServer(function(res, res) {
  fs.readFile('./index.html', function(err, data){
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(data, 'utf-8');
  })
}).listen(3000, '127.0.0.1');

console.log('server running at http://127.0.0.1:3000');

var io = require('socket.io').listen(server);

io.sockets.on('connection', function(socket) {
  count++;
  console.log("user connected" + count + 'users');
  socket.emit('users', {number: count});
  socket.broadcast.emit('users', {number: count});
  
  socket.on('disconnect', function() {
    count--;
    console.log('user disconnected' + count + 'users');
    socket.broadcast.emit('users', {number: count});
  });
});

html代碼以下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>socket.io node.js</title>
    <style>
      
    </style>
  </head>
  <body>
    <h3>socket.io實時監聽服務器上所鏈接客戶端的數量</h3>
    <p id="count"></p>

    <script src="http://localhost:3000/socket.io/socket.io.js"></script>
    <script>
      var socket = io.connect('http://127.0.0.1:3000');
      var count = document.getElementById('count');
      
      // 偵聽users的事件
      socket.on('users', function(data) {
        console.log(data);
        count.innerHTML = data.number;
      });
    </script>
  </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。