socket.io入门

2024年4月9日 133次阅读 来源: 落霞与孤鹜齐飞

关于Socket.Io

  • Socket.IO是一个库，它支持浏览器和服务器之间的实时、双向和基于事件的通信。
  • Socket.IO是不WebSocket实现。尽管Socket.IO确实在可能的情况下使用WebSocket作为传输，但它在每个数据包中添加了一些元数据：数据包类型、名称空间和当需要消息确认时的ack id。这就是为什么WebSocket客户端无法成功连接到Socket.IO服务器，Socket.IO客户端也无法连接到WebSocket服务器。（WebSocket的原理就是利用Http请求产生握手，握手之后，二者转用TCP协议进行交流，但是如果使用WebSocket，需要浏览器和服务器都支持才可以，例如IE9以下浏览器不支持HTML5，则不行）

  • 文档

Demo

package.json

{
  "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.js

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.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("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.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>
<!-- 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这样的回调函数也可以理解为参数，一次发送不应该写多个回调，否则只有最后一个起效，回调应作为最后一个参数。
    原文作者：落霞与孤鹜齐飞
    原文地址: https://segmentfault.com/a/1190000016503575
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞