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