欢迎您来到,码代码-李雷博客        登录  |  注册

关于Node.js安装搭建WebSocket环境及简单实时通信实现方法讲解

更新:2019-01-07 10:07:17
人气:2306
来源:本站原创
A+

WebSocket的出现是基于Web应用的实时性需要而产生的。这种实时的Web应用大家应该不陌生,在生活中都应该用到过,比如新浪微博的评论、私信的通知,腾讯的WebQQ等。让我们来回顾下实时 Web 应用的窘境吧。

在WebSocket出现之前,一般通过AJAX轮询来实现Web实时用。我本人也是通过js定时刷新并通过AJAX查询MYSQL数据库存入的指令,判断下一步的运作,在执行完动作后,写入已完成标记,再进入轮询等待下一步指令。现在我们使用websocket实现了浏览器与服务器全双工通信(full-duplex)。HTML5定义了WebSocket协议,能更好的节省服务器资源和带宽并达到实时通讯。也解决了我当时因为轮询造成的服务器压力。

我个人是做PHP开发,但对实时通信很感兴趣,只是觉得node.js实现这个比较简单,就琢磨了一下,现在把整个过程记录下来,与大家分享。

下面就讲一下,如何安装Node.js,这里安装的版本是:node-v10.8.0-x64,大家可以网上下载,这里因为资源有限,不方便上传,有需要也可以联系我QQ发给你。

软件双击安装后都是正常下一步就可以了,其中就有一步需要大家注意,主要注意点如下选择“Add to PATH”,因为这样会自动给你配置对应的环境变量,其余的都是直接下一步然后install。

需要注意的点击项,选择Add to PATH

安装完成后,检测PATH环境变量是否配置了Node.js,点击开始=》运行=》输入"cmd" => 输入命令"path",输出如下结果:

C:\Users\hello>path

PATH=C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32
\WindowsPowerShell\v1.0\;C:\Program Files\Lenovo\Touch Fingerprint Software\;c:\
Program Files (x86)\QuickTime\QTSystem\;C:\Program Files\nodejs\;D:\phpStudy\PHP
Tutorial\php\php-5.6.27-nts\;C:\Users\hello\AppData\Roaming\npm

我们可以看到环境变量中已经包含了C:\Program Files\nodejs\

检查Node.js版本

检查Node.js版本

安装websocket

cmd打开控制台 输入命令:npm install nodejs-websocket   (必须连接互联网)

到此,文件已经安装成功。


下面给出三个文件:

(1)node.js,这个是服务端用于接收及广播信息用的,也就是从终端浏览器发送过来,进行信息处理加工再发送出去的。服务器端的监听端口也在这里设置。(这个文件要放在node_modules\nodejs-websocket目录下,具体位置,请看第三个文件)

var ws = require("nodejs-websocket")
const PORT = 4455;
// 每进来一个客户端就记录一下
var clientCount = 0;
var server = ws.createServer(function(conn) {
    console.log("New connection")
    clientCount++;
    conn.nickname = 'user' + clientCount;
    let mes = {};
    mes.type = "enter";
    mes.data = conn.nickname + ' comes in'
    broadcast(JSON.stringify(mes));
    conn.on("text", function(str) {
        console.log("Received " + str);
        let mes = {};
        mes.type = "message";
        //mes.data = conn.nickname + ' says:' + str;
mes.data = str;
        broadcast(JSON.stringify(mes));
    })
    conn.on("close", function(code, reason) {
        console.log("Connection closed");
        let mes = {};
        mes.type = "leave";
        mes.data = conn.nickname + ' left'
        broadcast(JSON.stringify(mes));
    })
    conn.on("error", function(err) {
        console.log("handle err");
        console.log(err);
    })
}).listen(PORT);
console.log("websocket server running on port: " + PORT);

function broadcast(str) {//这个是进行广播用的,即将接收的信息发送给所有已经连接通信的终端,如果不进行广播,谁发送再直接返回给谁那就失去意义了。
    server.connections.forEach(function(connection) {
        connection.sendText(str);
    })
}

(2)index.php这个是浏览器终端,给用户输入信息或指令用的,大家要灵活运用,比如用这个做为一个控制台发送指令,管理全部终端的动作指令,至于如何区分不同终端,建议大家给每个页面挂一个参数,同时在返回的指令前加一个前缀,判断指令是发送给谁的,这只是一个简单的处理办法。或者大家也可以安装node-uuid来处理这个事件。(这个文件放在你web的目录里,哪个地方用就放里,相当于一个独立页面)

<!DOCTYPE html>
<html>
<head>
    <meta charset="gb2312">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>websocket聊天室</title>
</head>
<body>
    <input id="sendTxt" type="text">
    <button id="send">send</button>
    <script type="text/javascript">
        var websocket = new WebSocket("ws://192.168.1.102:4455/");
        websocket.onopen = function() {
            console.log("websocket open");
            // 发送消息放在这里
            document.getElementById("send").onclick = function() {
                var txt = document.getElementById("sendTxt").value;
                if (txt) {
                    websocket.send(txt);
                }
            }
        }
        websocket.onclose = function() {
            console.log("websocket close");
        }
        // 只接收字符串参数,所以在服务端相传对象过来可以用JSON先转换成字符串,然后在这边转成对象
        websocket.onmessage = function(e) {
            console.log(e.data);
            var mes = JSON.parse(e.data);
            showMessage(mes.data, mes.type);
        }
        // 显示消息函数
        function showMessage(str, type) {
            var div =  document.getElementById("abc");
            if (type == "enter") {
                div.style.color = "red";
            } else if (type == "message") {
                div.style.color = "blue";
            } else if (type == "leave") {
                div.style.color = "green";
            }
            document.getElementById("abc").innerHTML = str;
        }
    </script>
<div id="abc"></div>
</body>
</html>

(3)另外对于启动nodejs-websocket服务,我是通过建立一个bat文件来实现的。将以下内容用记事本保存,并将文件名改为“启动nodejs_websocket.bat”,注意结尾是bat。大家也可以在cmd命令行中直接执行以下命令也可启动服务。

node C:\Users\hello\node_modules\nodejs-websocket\node.js

到此,nodejs-websocket的安装及基本使用已经完成。刚才讲的node.js放置的位置,也就是这个路径了,具体要看一下执行完npm install nodejs-websocket后,nodejs-websocket所在哪个位置,就把node.js放这个文件夹里就行了。我想我讲的应该很清楚了吧。

现在大家就可以试试,用不同的电脑访问index.php文件,任意一个发送一个指令信息,其它终端浏览器是不是也都同时收到了?这个真的是解决了很大问题,即减少了轮询对数据库和服务器的压力,又保证了实时性,这样对于大家今后开发远程终端控制有很大帮助。

回过头来总结一下,我们刚刚已经把安装过程讲解了,我估计大家和我一样最初对于实时通信是如何使用是迷茫的,想必现在已经思路清晰了,我们可以这样理解,node.js是服务器端接收指令并转发给其它终端的,index.php实现的就是发送指令的。现在哪个文件放在哪里,起什么作用大家应该明白了,我也就讲这么多了,有不到之处请大家理解。

打赏

取消

感谢您的支持,我会继续努力的!

扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

推荐的文章
# 发表我的评论
  /     /  
# 最近评论

提示:初始化   npm init

网站地图
会员服务
关于我们
QQ:858353007
 
广告服务
关注微信
手机访问
 
 
Copyright © 2014-2019 www.mdaima.com All Rights Reserved.
版权所有:码代码-李雷博客 | 专注PHP技术经验教程分享!   ICP备案号:京ICP备10202169号