websocket快速搭建（node+websocket）

時間 2019-11-11

標籤 websocket 快速搭建 node+websocket node 简体版

原文原文鏈接

移動互聯時代，消息的推送愈來愈重要，其中使用websocket的是最方便的

如何使用websocket 快速搭建一個本身的消息推送機制呢

這裏就簡單的使用node+html頁面來實現websocket的消息傳送

node篇

先寫一個監聽服務的文件，這裏取名server.js（ws模塊須要本身去安裝，命令是 npm i ws）css

const WebSocket = require('ws'); // 引入模塊
const ws = new WebSocket.Server({port:3000},()=>{ // 監聽接口
    console.log("socket start")
})


let clients = [];
        ws.on('connection',(client)=>{
            //console.log("client:",client)
            clients.push(client)
            client.send("歡迎光臨");
            client.on('message',(msg)=>{
                console.log("來自服務器的數據",msg);
                client.send(msg); // 經過send方法來給前端發送消息
                //sendall();
            })
            client.on('close',(msg)=>{
                console.log("關閉服務器鏈接")
            })
        })

以後對這個這個文件 node啓動，到對應文件目錄下打命令 node server.js
html

命令框出現「socket start」字樣就是說嘛服務啓動了,以後就等待前臺的命令了前端

html篇

html這裏就作一個簡單消息發送，而後把發送的消息回傳回來node

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1></h1>
    <br>
    <input type="text" id="sendtext"><button onclick="send()">send</button>
    <script>
        const ws = new WebSocket("ws://localhost:3000/") // 監聽地址端口號
        ws.onopen = function(){
            console.log("服務器鏈接")
        }
        ws.onmessage= (msg)=>{
            console.log("來自服務器發來的數據"+msg.data)
            console.log("來自服務器msg",msg)
            alert("服務器返回內容："+msg.data)
        }
            
        ws.onclose=()=>{
            console.log("服務器關閉")
        }
        function send(){
            //alert()
            let msg = document.getElementById("sendtext").value;
            //alert(msg)
            ws.send(msg)
        }
    </script>
  </body>
</html>

這就完成了一個簡單消息發送回傳的功能，須要注意的是這裏發送監聽的端口須要和後端監聽端口一致，這裏寫的是3000web