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

最新推荐文章于 2024-08-15 08:55:23 发布

涉水的小菜叽

最新推荐文章于 2024-08-15 08:55:23 发布

阅读量5.1k

点赞数 4

分类专栏： websocket-js-聊天

本文链接：https://blog.csdn.net/xxhdcblogzh888/article/details/75503267

版权

websocket-js-聊天专栏收录该内容

1 篇文章 0 订阅

订阅专栏

初识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:8888

var 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>