nodejs--websocket簡易代碼實現局域網多個客戶端進行通信

初識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.οnlοad=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.οnerrοr=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>