websocket聊天室实现_websocket keepalive-CSDN博客

websocket前置知识

socket

连接建立直接发送，有一端断开了通道销毁实时性

http

很快就会销毁断开，对消息的格式有限制，客户端主动的发起
实时性解决方案:

轮询
长连接，请求的时候带keep-alive

websocket

专门解决实时传输的问题

客户端建立连接通道
客户端发送一个http格式的消息（特殊格式），服务器响应一个http格式的消息（特殊格式）,http握手
双方自由通信，通信格式按照websocket的要求进行
客户端或服务器断开，通道销毁

socket.io

封装websocket

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>测试一下websocket</title>
</head>
<body>

<input id='name' type='text'>
<button id='set-name' type='button'>设置用户</button>

<input id='text' type='text'>
<button id='btn' type='submit'>发送</button>
<div id="root"></div>
<script>
var ws = null;
document.getElementById('set-name').onclick = function() {
    var name = document.getElementById('name').value;
    if(name === null){
        alert('注意用户名不能为空');
    }
    console.log(name);
    ws =new WebSocket('ws://localhost:2333');
    ws.onopen = function (){
        ws.send(JSON.stringify({name:name,type:'set-name'}));
        document.getElementById('btn').onclick = () => {
            ws.send(JSON.stringify({text:document.getElementById('text').value,type:'chat'}));
        }
    }
    ws.onmessage = function (e){
        console.log(e.data);
        document.getElementById('root').appendChild(createChatPanel(JSON.parse(e.data)));
    }
    document.getElementById('set-name').style.display = 'none';
}
//页面手动添加div
function createChatPanel(data){
    var name = data.name;
    var text = data.text;
    var div = document.createElement('div');
    var p1 = document.createElement('p');
    var p2 = document.createElement('p');
    p1.innerHTML = name + ":" + (new Date()).toString();
    p2.innerHTML = text;
    p1.style.color = 'green';
    div.appendChild(p1);
    div.appendChild(p2);
    return div;
}
</script>

</body>
</html>

var ws = require('nodejs-websocket');

var server = ws.createServer(function (conn) {
    console.log('connected');
    //on text 发送消息
    conn.on('text', function (str) {
        var data = JSON.parse(str);
        console.log('data',data);
        switch (data.type) {
            case 'chat':
                boardCast(JSON.stringify({name: conn.nickname, text: conn.nickname + '说:' + data.text}));
                break;
            case 'set-name':
                conn.nickname = data.name;
                boardCast(JSON.stringify({text: data.name + '加入了房间', name: conn.nickname}));
                break;
        }

    });
    conn.on('close', function () {
        boardCast(JSON.stringify({name: conn.nickname, text: conn.nickname + '退出了房间'}));
    });
    conn.on('error', function (err) {
        console.log(err);
    });
}).listen(2333);

/**
 * 这个connections是一个数组包含我们所有的连接
 */
//我们来写一个广播吧
function boardCast(str) {
    server.connections.forEach((conn) => {
        conn.sendText(str);
    });
}