找回密码
当前位置：前端开发者 > Node.js > 正文

Node.js + WebScoket实现即时通讯

2018-11-26 分类：Node.js 阅读(1029) 评论(0)
web前端手机端开发环境
web前端开发环境
前端开发环境搭建
前端搭建开发环境

H5新增比较牛逼的不止canvas 还有webscoket 可以实现即时通讯 ，这次小白就用node.js实现以下，话不多说，先上代码
本文适合有node.js基础的人学习。
首先创建webscoket 在命令行收入npm install nodejs-websocket。等待安装之后先复制下面代码.具体代码意思后面解释
//index.js
javascript 代码

var ws = require(‘nodejs-websocket’)
console.log(‘开始建立连接…’)
var game1 = null,
    game2 = null,
    game1Ready = false,
    game2Ready = false
var server = ws
    .createServer(function(conn) {
        conn.on(‘text’, function(str) {
            console.log(‘收到的信息为:’ + str)
            if (str === ‘game1’) {
                game1 = conn
                game1Ready = true
                conn.sendText(‘success’)
            }
            if (str === ‘game2’) {
                game2 = conn
                game2Ready = true
            }
            if (game1Ready && game2Ready) {
                game2.sendText(str)
            }
            conn.sendText(str)
        })
        conn.on(‘close’, function(code, reason) {
            console.log(‘关闭连接’)
        })
        conn.on(‘error’, function(code, reason) {
            console.log(‘异常关闭’)
        })
    })
    .listen(8001)
console.log(‘WebSocket建立完毕’)

game1.html

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>Document</title>
        <script src=”https://code.jquery.com/jquery-3.2.1.min.js”></script>
        <style>
            .kuang {
                text-align: center;
                margin-top: 200px;
            }
            #mess {
                text-align: center;
            }
            .value {
                width: 200px;
                height: 200px;
                border: 1px solid;
                text-align: center;
                line-height: 200px;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div id=”mess”>正在连接…</div>
        <div class=”kuang”>
            <div class=”value” id=”value1″>小明小明</div>
            <div class=”value” id=”value2″>大胸大胸</div>
            <div class=”value” id=”value3″>小张小张</div>
        </div>
        <script>
            var mess = document.getElementById(‘mess’)
            if (window.WebSocket) {
                var ws = new WebSocket(‘ws://127.0.0.1:8001’)
                ws.onopen = function(e) {
                    console.log(‘连接服务器成功’)
                    ws.send(‘game1’)
                }
                ws.onclose = function(e) {
                    console.log(‘服务器关闭’)
                }
                ws.onerror = function() {
                    console.log(‘连接出错’)
                }
                ws.onmessage = function(e) {
                    mess.innerHTML = ‘连接成功’
                    document.querySelector(‘.kuang’).onclick = function(e) {
                        var time = new Date()
                        ws.send(
                            time + ‘ game1点击了“’ + e.target.innerHTML + ‘”’,
                        )
                        // ws.send(1);
                    }
                }
            }
        </script>
    </body>
</html>

//game2.html
html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>Document</title>
        <style>
            .kuang {
                text-align: center;
                margin-top: 200px;
            }
            #mess {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id=”mess”></div>
        <script>
            var mess = document.getElementById(‘mess’)
            if (window.WebSocket) {
                var ws = new WebSocket(‘ws://127.0.0.1:8001’)
                ws.onopen = function(e) {
                    console.log(‘连接服务器成功’)
                    ws.send(‘game2’)
                }
                ws.onclose = function(e) {
                    console.log(‘服务器关闭’)
                }
                ws.onerror = function() {
                    console.log(‘连接出错’)
                }
                ws.onmessage = function(e) {
                    var time = new Date()
                    mess.innerHTML += time + ‘的消息：’ + e.data + ‘<br>’
                }
            }
        </script>
    </body>
</html>
可以先观看效果 node index 或者node.index.js

具体webscoket实现即时通讯的原理就是，客服端向服务端请求一次并且保存记录，webscoket的作用就在这里 他可以让服务端主动给客服端发送信息，就是第一次访问，之后服务器如果有新信息的话可以主
像客户端发送信息.webscoket比ajax轮询的好处是减少资源，并且不用一直访问数据下面讲下ajax轮询
AJAX轮询：每N秒请求一次比如：
客户端：有数据么？
服务端：没有。
客户端：有数据么？
服务端：没有。
客户端：有数据么？
服务端：没有。
客户端：有数据么？
服务端：有，给你……
这样会浪费好多的资源

现在webscoket的原理是：
客户端：有数据的话发给老子.别让我催
服务端：好的哥,
服务端： 你好啊 （新数据）
服务端： 吃饭了么 （新数据）
一次访问 建立连接 以后都可以用

前端开发环境和生产环境搭建
web前端开发需安装啥环境
前端开发环境部署
前端开发环境推荐
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论