如何将socket.io Web聊天服务器转移到普通的Websocket服务器?

时间:2019-04-07 11:53:56

标签: javascript html websocket socket.io

这是一个基于socket.io的简单网络聊天室。我想将其更改为简单的WebSocket,但我不知道该怎么做。 我该如何也适应RAW WebSocket而不是socket.io?非常感谢! 我的代码附在下面!

index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
        <title>Chat Room</title>
        <link type="text/css" rel="stylesheet" href="css/chat.css">
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/socket.io.js"></script>
        <script type="text/javascript" src="js/chat.js"></script>
    </head>
    <body>

        <div class="login-wrap">
            <div class="login-con">
                <h3>Enter User</h3>
                <input type="text" placeholder="Please enter your user name:" id="loginName">
                <button class="login-btn">Login</button>
            </div>
    <!--        <div class="portnum">
                <h3>Enter Port</h3>
                <input type="text" placeholder="Please enter the portnum here:" id="portnum">
                <button class="portnum-btn">Connect</button>
            </div> -->
        </div>

        <div class="chat-wrap hide">
            <h1>Chat Room</h1>
            <div class="users-con">
                <p><h4>Online Users:</h4></p>
            </div>
            <div class="chat-con clearfix"></div>
            <div class="bottom">
                <input type="text" id="content">
                <button class="sendBtn">Send</button>
            </div>
        </div>
    </body>
    </html>

chat.js

$(function(){

        var socket = io('ws://localhost:8081');
        var uname = null;
        var name = null;
        //var pnum = null;

        /*Login*/
        $('.login-btn').click(function(){
            uname = $.trim($('#loginName').val());
            if(uname){
                socket.emit('login',{username:uname})
            }else{
                alert('!Please enter a username!')
            }
        })  
        /*Send Button message*/
        $('.sendBtn').click(function(){
            sendMessage()
        });


        /*Login*/
        socket.on('loginSuccess',function(data){
            if(data.username === uname){
                checkin(data)
            }else{
                alert('!Username unavalable, please try again!')
            }
        })

        /*On Fail*/
        socket.on('loginFail',function(){
            alert('!Username duplicated!')
        })

        /*Notice*/
        socket.on('add',function(data){
            name = data.username;
            var html = '<p>'+name+' have entered the group chat.</p>';
            var users_con = '<p>'+name+'</p>';
            $('.chat-con').append(html);
            $('.users-con').append(users_con);
        })

        /*Recieve msg*/
        socket.on('receiveMessage',function(data){
            showMessage(data)
        })

        /*Hide the login screen*/
        function checkin(data){
            $('.login-wrap').hide('slow');
            $('.chat-wrap').show('slow');
        }

        /*Send msg*/
        function sendMessage(){
            var content = $('#content').val();
            $('#content').val('');
            if(content){
                socket.emit('sendMessage',{username:uname,message:content});
            }
        }

        /*Show msg*/
        function showMessage(data){
            var html
            if(data.username === uname){
                html = '<div class="chat-item item-right clearfix"><span class="message fr">'+data.username+": "+data.message+'</span></div>'
            }else{
                html='<div class="chat-item item-left clearfix rela"><span class="fl message">'+data.username+": "+data.message+'</span></div>'
            }
            $('.chat-con').append(html);
        }

        /*Leave*/
        socket.on('leave',function(name){
            if(name != null){
                var html = '<p>'+name+' have left the group chat.</p>';
                $('.chat-con').append(html);
            }
        })


    })

app.js

var app = require('http').createServer();
    var io = require('socket.io')(app);
    var PORT = 8081;
    /*Users*/
    var users = [];

    app.listen(PORT);

    io.on('connection', function (socket) {
        /*If it is duplicated*/
        var isNewPerson = true; 
        /*Current user*/
        var username = null;
        /*Listen*/
        socket.on('login',function(data){
            for(var i=0;i<users.length;i++){
                if(users[i].username === data.username){
                    isNewPerson = false;
                    break;
                }else{
                    isNewPerson = true;
                }
            }
            if(isNewPerson){
                username = data.username;
                users.push({
                  username:data.username
                })
                /*Login Success*/
                socket.emit('loginSuccess',data);
                /*Add*/
                io.sockets.emit('add',data);
            }else{
                /*Login Fail*/
                socket.emit('loginFail','');
            }  
        })


        /*listen*/
        socket.on('sendMessage',function(data){
            io.sockets.emit('receiveMessage',data);
        })

        /*disconnect*/
        socket.on('disconnect',function(){
            /*on leave*/
            io.sockets.emit('leave',username);
            users.map(function(val,index){
            if(val.username === username){
                users.splice(index,1);
            }
          })
        })
    })

    console.log('app listen at:'+PORT);

什么是Socket.IO

Socket.IO是一个库,可用于在浏览器和服务器之间进行实时,双向和基于事件的通信。它包括:

Node.js服务器:源| API 浏览器的Javascript客户端库(也可以从Node.js运行): API 其主要特点是:

可靠性

即使存在以下情况也会建立连接:

代理和负载平衡器。 个人防火墙和防病毒软件。 为此,它依赖于Engine.IO,该引擎首先建立长轮询连接,然后尝试升级到侧面经过“测试”的更好的传输,例如WebSocket。请参阅“目标”部分以获取更多信息。

自动重新连接支持

除非另有指示,否则断开连接的客户端将尝试永久重新连接,直到服务器再次可用为止。请在此处查看可用的重新连接选项。

断开连接检测

在Engine.IO级别上实现了心跳机制,使服务器和客户端都可以知道对方何时不再响应。

该功能是通过在服务器和客户端上设置计时器来实现的,并且在连接握手期间共享了超时值(pingInterval和pingTimeout参数)。这些计时器要求将任何后续客户端调用都定向到同一服务器,因此使用多个节点时需要执行粘性会话。

0 个答案:

没有答案