WebSocket与消息推送-优快云博客

本文详细介绍了WebSocket的原生实现方式及其复杂性，并对比展示了如何使用Socket.IO简化WebSocket的开发流程，包括客户端与服务器端的具体操作步骤。

一、原生

WebSocket的原生写法比较恶心，最恶心的要连接成功之后处理的数据都是些二进制数据，所以现在先讲讲怎么原生实现WebSocket连接

1.客户端（浏览器）

客户端的代码极其简单：

let ws = new WebSocket('ws://localhost:8080/');

ws.onopen = function(){
    alert('连接开始啦！');
    ws.send('hahahaha');
}    
ws.onmessage = function(data){
    alert('有消息过来');
    console.log(data);
}
ws.onclose = function(){
    alert('连接关闭了');
}
wa.onerror = function(){
    alert('连接出错了');  
}

2.服务器端(node)

const net = require('net');
const crypto = require('crypto');

const server = net.createServer(socket=>{
    socket.once('data',data=>{
        //第一次接收客户端请求，首先要验证是否请求更换协议，因此我们要先将data（HTTP头部信息）转成json格式，方便查询
        let temp = data.toString().split('\r\n');
        let Header = {}; 
        temp.forEach(item=>
            let [name, key] = item.split(': ');
            Header[name] = key;
        }
        //验明是否更换websocket协议(Upgrade头是表示更换到什么协议，Connection头是现在连接状态是什么)
        if(Header.Upgrade!='websocket'||Header.Connection!='Upgrade'){
            //表示将要Upgrade到websocket协议，connection状态是'Upgrade'（实时更新的）
            socket.end();
        }
        //验明是否为预期版本
        else if(Header['Sec-WebSocket-Version']!='13'){
            socket.end();
        }
        //通过验证后，最后返回WebSocket-Accept(WebSocket-Key+指定guid)
        else{
            const hash = crypto.createHash('sha1');
            hash.update(Header['Sec-WebSocket-Key']+'258EAFA5-E914-47DA-95CA-C5AB0DC85B11');
            let base64Str = hash.digest('base64');
            socket.write(`HTTP/1.1 101 Switching Protocols\r\nUpgrade: websocket\r\nConnection: Upgrade\r\nSec-WebSocket-Accept: ${base64Str}\r\n\r\n`);
        }
        //第二次以后on data走下面的函数
        socket.on('data',data=>{
            //data是二进制数，用原生js处理起来特别恶心
        })
    });
    socket.on('end',()=>{
        console.log('连接断开了~');
    })
});

二、socket.io

node有一个库叫socket.io，用WebSocket非常方便，特别体验在服务器端

客户端：

1.先引用路径下的socket.io/socket.io.js

2.连接，获取socket接口对象：let sock = io.connect('ws://~~~')

3.接下来就是使用sock了（sock.emit('事件名字',data)；sock.on('事件名字',data=>{用data来干点什么})）

<script type="text/javascript" src="http://localhost:8088/socket.io/socket.io.js"></script>
<script>
window.onload = function(){
    let sock = io.connect('ws://localhost:8088/');
    sock.emit('test01','xiaomiemie');
    sock.on('test02',(data1)=>{
      document.body.innerHTML += data1;
    })
}
</script>

简单的来说，就是调用库(socket.io.js)->用io连接，获取socket接口对象->使用socket接口对象（emit和on）

服务器端：

const http = require('http');
const io = require('socket.io');

//先按照正常的套路写
const server = http.createServer();
server.listen(8088);

//io出场,封装httpServer成为WebSocket Server
const wsServer = io.listen(server);
//当wsServer connection的时候
wsServer.on('connection',sock=>{
    //sock就是相当于客户端io.connect('ws://~~~')返回的sock对象一样了
    //（sock.emit('事件名字',data)；sock.on('事件名字',data=>{用data来干点什么})）
    sock.emit('test02','hahaha');
    sock.on('test01',data=>{
        console.log(data)
    })
})

简单的来说，就是调用库(require('socket.io'))->用io封装httpServer，获取WSServer->连接，获取socket接口对象->使用socket接口对象（emit和on）

参考：http://www.cnblogs.com/amiezhang/p/7929416.html

转载于:https://www.cnblogs.com/crazycode2/p/8158802.html