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

Node.js + WebScoket实现即时通讯

2018-11-26 21:50:12 分类：Node.js 阅读(278) 评论(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前端开发需安装啥环境
前端开发环境部署
前端开发环境推荐
» 本文来自：前端开发者 » 《Node.js + WebScoket实现即时通讯》
» 本文链接地址：https://www.rokub.com/6784.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论