nodejs--websocket简易代码实现局域网多个客户端进行通信

来源:互联网 发布:mac怎么给iphone换铃声 编辑:程序博客网 时间:2024/05/16 18:56

初识websocket:

WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。在WebSocket API中,浏览器和服务器只需要要做一个握手(handshaking)的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
WebSocket是一个通信的协议,分为服务器和客户端。服务器放在后台,保持与客户端的长连接,完成双方通信的任务。客户端一般都是实现在支持HTML5浏览器核心中,通过提供JavascriptAPI使用网页可以建立websocket连接。

下面是笔者的代码的运行:
先安装好websocket插件:命令窗输 npm install websocket
命令窗运行文件代码:

var express = require('express');var app = new express();app.use(express.static('public'));app.set('views engine','ejs');app.get('/',function(req,res){    res.render('home3');})app.listen(8888);       //请求地址localhost:8888var ws = require('nodejs-websocket'); //引入websocket模块var server = ws.createServer(function(c){   //建立一个服务器连接         console.log('connection is succession');  //如果连接成功在命令窗打印内容        c.on('text',function(str){    //调用on方法,内容为text类型,回调函数的操作是向每个连接该服务器的客户端发送内容。            server.connections.forEach(function(connection){ //                connection.sendText(str);            })        })})server.listen(1111);

前端页面代码:
注意要把文件后缀html改成ejs,因为后台文件跳转的页面是用ejs中件渲染的,不想改的话可以试试把res.render(‘home3’) 改成res.sendFile(__dirname + “/views” + “/home3.html”);

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <input type="text" name="inp" id="inp" placeholder="请输入你想发送的话" />        <button id = 'btn', onclick="send()">发送</button>        <script type="text/javascript">            var ws;             window.onload=function(){                ws= new WebSocket('ws://192.168.3.102:1111'); //端口号和websocket对象创建的server的监听端口号一致;                ws.onopen=function(){    //websocket的4种状态                    console.log('ws is opening')                };                ws.onmessage=function(mydata){                    var div = document.createElement('div')                    div.innerHTML=mydata.data;                    document.body.appendChild(div);                }                ws.onclose=function(){                    console.log('ws is closed');                }                ws.onerror=function(){                    console.log('ws is error');                }            }            function send(){                var str = document.getElementById('inp').value;                if(str==''){                    alert('请输入内容');                }else{                    ws.send(str);                }                str = '';            }        </script>    </body></html>

这样的话,运行后台文件,然后每个客户端在页面上请求服务器端的ip:端口号,则可以进行连入通信了。
以上面代码为例:
运行后台代码文件–访问192.168.3.102:8888–输入内容,进行通信

原创粉丝点击