socket.io入門

時間  2019-11-07
標籤 socket.io socket 入門 欄目 系統網絡 简体版
原文   原文鏈接

關於Socket.Io

  • Socket.IO是一個庫，它支持瀏覽器和服務器之間的實時、雙向和基於事件的通訊。
  • Socket.IO是不WebSocket實現。儘管Socket.IO確實在可能的狀況下使用WebSocket做爲傳輸，但它在每一個數據包中添加了一些元數據：數據包類型、名稱空間和當須要消息確認時的ack id。這就是爲何WebSocket客戶端沒法成功鏈接到Socket.IO服務器，Socket.IO客戶端也沒法鏈接到WebSocket服務器。（WebSocket的原理就是利用Http請求產生握手，握手以後，兩者轉用TCP協議進行交流，可是若是使用WebSocket，須要瀏覽器和服務器都支持才能夠，例如IE9如下瀏覽器不支持HTML5，則不行）

  • 文檔html

Demo

package.jsonjquery

{
  "name": "study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "express": "^4.16.3",
    "socket.io": "^2.0.4"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

index.jsexpress

const express = require('express')
const app = express()

const server = require('http').Server(app)

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

app.get('/', (req,res)=>{
    res.sendFile(__dirname + '/index.html')
})

app.get('/one', (req,res)=>{
    res.sendFile(__dirname + '/one.html')
})

app.get('/two', (req,res)=>{
    res.sendFile(__dirname + '/two.html')
})

// 監聽用戶是否進入，無論多少個用戶都是一個connection
io.on('connection', socket=>{
    console.log('有客人來了')

    // socket 監聽客戶端發送的數據msg
    socket.on('chatroom', msg=>{ // 接收chatroom命令，這裏的msg就是用戶輸入的內容
        io.emit('chatroom_1', `服務器說：${msg}`) // 發出chatroom_1命令，回覆客戶端消息
    })

    socket.on('chatone', msg=>{
        io.emit('chatone', `one: ${msg}`)
    })

    socket.on("chattwo",function(msg){
        io.emit("chattwo", `${msg.id}: ${msg.mes}`)
    });
})

server.listen(80)

index.htmlnpm

<!doctype html>
<html>
<head>
    <title>Socket.IO chat</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font: 13px Helvetica, Arial; }
        form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
        form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
        form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
        #messages { list-style-type: none; margin: 0; padding: 0; }
        #messages li { padding: 5px 10px; }
        #messages li:nth-child(odd) { background: #eee; }
    </style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
    <input id="msg" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
    var socket = io();
    $("form").submit(function(){
        socket.emit("chatroom", $("#msg").val()); // 發出chatroom命令，將用戶輸入的消息發送到服務器，即服務端的msg
        $("#msg").val(""); // 將input窗口的內容清空
        return false;
    });
    socket.on("chatroom_1",function(msg){ // 接收chatroom_1命令，這裏的msg是服務器返回的內容
        $("#messages").append("<li>" + msg + "</li>");
    });
</script>
</body>
</html>

one.htmljson

<!doctype html>
<html>
<head>
    <title>Socket.IO chat</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font: 13px Helvetica, Arial; }
        form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
        form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
        form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
        #messages { list-style-type: none; margin: 0; padding: 0; }
        #messages li { padding: 5px 10px; }
        #messages li:nth-child(odd) { background: #eee; }
    </style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
    <input id="msg" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<!-- http://localhost:3000/socket.io/socket.io.js -->
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
    var socket = io();
    $("form").submit(function(){
        socket.emit("chatone",$("#msg").val());
        $("#msg").val("");
        return false;
    });
    socket.on("chatone",function(msg){
        $("#messages").append("<li>" + msg + "</li>");
    });
</script>
</body>
</html>

two.html瀏覽器

<!doctype html>
<html>
<head>
    <title>Socket.IO chat</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font: 13px Helvetica, Arial; }
        form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
        form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
        form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
        #messages { list-style-type: none; margin: 0; padding: 0; }
        #messages li { padding: 5px 10px; }
        #messages li:nth-child(odd) { background: #eee; }
    </style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
    <input id="msg" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
    var socket = io();
    $("form").submit(function(){
        socket.emit("chattwo",{mes:$("#msg").val(), id: Math.random()*Date.now()}); // 傳送json到服務器
        $("#msg").val("");
        return false;
    });
    socket.on("chattwo",function(msg){ // 這裏的msg是服務器返回的內容，即`${msg.id}: ${msg.mes}`（msg是服務器接收到的json）
        $("#messages").append("<li>"+msg+"</li>");
    });
</script>
</body>
</html>
  • socket.emit('action');表示發送了一個action命令，命令是字符串格式，在另外一端接收時寫爲：socket.on('action',function(){...});
  • socket.emit('action',data);表示發送了一個action命令，還有data數據，在另外一端接收時寫爲：socket.on('action',function(data){...});
  • socket.emit(action,arg1,arg2);表示發送了一個action命令，還有兩個數據，在另外一端接收時寫爲：socket.on('action',function(arg1,arg2){...});
  • 在emit方法中包含回調函數，例如：socket.emit('action',data,function(arg1,arg2){});那麼這裏面有一個回調函數能夠在另外一端調用，另外一端能夠這麼寫：socket.on('action',function(data,fn){fn('a','b')});
  • 上面的data數據能夠有0個或者多個，相應的在另外一端改變function中參數的個數便可，function中的參數個數和順序應該和發送時一致，固然向fn這樣的回調函數也能夠理解爲參數，一次發送不該該寫多個回調，不然只有最後一個起效，回調應做爲最後一個參數。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程