使用node.js安裝websocket做出多人聊天室

Teacher

wells

Review

Free

1. 安裝node.js 官網: https://nodejs.org/en/ 2.開啟cmd輸入

npm install express
npm install ws
npm install mysql

3.創建server.js

//import express 和 ws 套件
const express = require('express')
const SocketServer = require('ws').Server

//指定開啟的 port
const PORT = 3000

//創建 express 的物件，並綁定及監聽 3000 port ，且設定開啟後在 console 中提示
const server = express()
    .listen(PORT, () => console.log(`Listening on ${PORT}`))

//將 express 交給 SocketServer 開啟 WebSocket 的服務
const wss = new SocketServer({ server })

//當 WebSocket 從外部連結時執行
wss.on('connection', ws => {
    console.log('Client connected')

    ws.on('message', data => {
        //取得所有連接中的 client
        let clients = wss.clients

        //做迴圈，發送訊息至每個 client
        clients.forEach(client => {
            client.send(data)
        })
    })

    ws.on('close', () => {
        console.log('Close connected')
    })
})

4.創建連線網頁檔(text.html)

<html>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
  $('#txtInput').keypress(function(e) {
    var key = window.event ? e.keyCode : e.which;
    if (key == 13)
      $('#btnSend').click();
  });
  $("#btnSend").on("click",function(){
    let txt = $("#txtInput").val();
    $("#txtInput").val("");
    ws.send(txt);
  })
})
//使用 WebSocket 的網址向 Server 開啟連結
var ws = new WebSocket('ws://localhost:3000')

ws.onopen = () => {
  console.log('open connection')
}

ws.onclose = () => {
  console.log('close connection');
}

//接收 Server 發送的訊息
ws.onmessage = event => {
  console.log(event);
  if(!$("#txtShow").val())
    $("#txtShow").val(event.data);
  else
    $("#txtShow").val($("#txtShow").val()+"n"+event.data);
  }
</script>
<textarea id="txtShow" style="height:60vmin;width:80vmin" disabled></textarea></br>
<input id="txtInput" style="width:80vmin" type="text"><input type="button" id="btnSend" value="送出">
</body>
</html>

5.開啟cmd到資料夾目錄輸入