nodejs與websocket模擬簡單的聊天室

時間 2019-12-05

標籤 nodejs websocket 模擬簡單聊天室简体版

原文原文鏈接

nodejs與websocket模擬簡單的聊天室

server.js

const http = require('http')
const fs = require('fs')

var userip


var server = http.createServer((req,res)=>{
    res.writeHead(200,{'Content-Type':'text/html;charset=utf8'})
    
    res.end(fs.readFileSync('./index.html'))
    userip = req.connection.remoteAddress
    userip = userip.replace('10.9.166.','')
})


//socket
const Server = require('ws').Server

//創建好了服務端
var wss = new Server({server})

//存放前端鏈接的socket
var clientMap = {}
var count = 0
var id = 0
//當客戶端鏈接上的就會觸發，回調會接收一個socket對象
wss.on("connection",function (socket) {
    count++
    id++
    socket.id = id
    clientMap[socket.id] = socket
    socket.nickname = '好友'
    console.log(`如今有${count}人鏈接了`)
    broadClients(socket.nickname,1)


    //當這個客戶端發送數據的時候會觸發
    socket.on("message",function (msg) {
        //console.log(`客戶端${socket.id} 說：${msg}`)
        let info = JSON.parse(msg)
        if(socket.nickname!=info.nickname){
            socket.nickname = info.nickname
            broadClients()
        }
        socket.nickname = info.nickname
        broadcast(socket,info.msg)
    })

    //當客戶端斷開的時候觸發
    socket.on("close",function () {
        //console.log(`客戶端${socket.id} 說：${msg}`)
        count--
        let nickname = socket.nickname
        delete clientMap[socket.id]
        broadClients(nickname,2)
       
      
    })

    //當客戶端鏈接出錯的時候
    socket.on("error",function (err) {
        console.log(err)
    })

})

//廣播函數，像全部的客戶端發送某一個客戶端說的話
function  broadcast(socket,msg) {
    let info = {nickname:socket.nickname+userip,msg:msg,type:'msg'}
    for(var id in clientMap){
        info.isMe = socket.id==id?'true':false
        clientMap[id].send(JSON.stringify(info))
    }
}

function  broadClients(nickname,type) {
    let clients = []
    for(var id in clientMap){
        clients.push(clientMap[id].nickname)
    }
    for(var id in clientMap){
        clientMap[id].send(JSON.stringify({
            count,clients,
            type:'count',
            nickname:nickname+userip,
            _type:type
        }))
    }
}



 server.listen(2000,'10.9.166.56')

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>wechat</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
    html,body{
        height: 100%;
        display: flex;justify-content: center;align-items: center;
    }
    #room{
        width: 600px;
        height: 600px;
        position: relative;
    }
    #room .panel-body{
        padding: 0;
    }
    #room .content{
        height: 460px;overflow-y: auto;
        padding: 10px;
        background: #fff;
    }
    #room .control-box{
        height: 90px;
        padding: 10px;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }
    #room .control-box .btn{
        margin: 0px 15px;
    }
    .list-group-item{
        border: none;
    }
    .list-group-item.other span:after{
        content: ':';
        display: inline-block;
        margin: 0px 3px;
    }
    .list-group-item.me span:before{
        content: ':';
        display: inline-block;
        margin: 0px 3px;
    }
    .list-group-item.me{
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
    }
    .numbers{
        position: absolute;
        width: 150px;
        top:0;left: -150px;
    }
    .numbers .online,.numbers .clients{
        width: 80%;
        margin-left: 10%;
    }
    .numbers .clients{
        margin-top: 15px;
        height: 400px;
        overflow: auto;
    }
    .p-info{
        font-size: 12px;
        color: rgb(172, 170, 170);
    }
</style>
<body>

    <div id="room" class="panel panel-primary">
        <div class="panel-heading clearfix">
                wechat
            <input id="nickname" placeholder="暱稱，默認爲好友" style="width:200px;" type="text" class="form-control pull-right">
        </div>
        <div class="panel-body">
            <div class="content">
                <ul class="list-group msgs"></ul>
            </div>
            <div class="control-box">
                <input id="word" type="text" class="form-control">
                <button id="send" class="btn btn-success">發送</button>
            </div>
        </div>

        <div class="numbers">
            <button class="btn btn-info online">
                在線人數：<span class="count"></span>
            </button>
            <ul class="list-group clients">
                  
            </ul>
        </div>

    </div>
    

    
   
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    //建立客戶端的鏈接socket
  var wsc = new WebSocket('ws://10.9.166.56:2000');

  wsc.onopen = function (e) {//當客戶端鏈接上的時候就會觸發
    //console.log('我已經鏈接上服務端了')
  };

  wsc.onmessage = function (e) {//當服務端返回消息的時候觸發
        //  console.log(e.data);
        let info = JSON.parse(e.data)
        switch(info.type){
            case 'msg':
            handleMsg(info);break;
            case 'count':
            handleCount(info);break;
        }

        
         
  };

  function handleMsg(info) {
    let str = `
    <li class="list-group-item ${info.isMe?'me':'other'}">
        <span>${info.nickname}</span>
        <button class="btn btn-success">${info.msg}</button>                    
    </li>
    `
    let li = $(str)       
    $(".msgs").append(li)
    li[0].scrollIntoView()
    word.value = ''
  }

  function handleCount(info) {
      $(".count").html(info.count)
      var str = ''
      info.clients.forEach(item => {
          str+='<li class="list-group-item list-group-item-info text-center">'+item+'</li>'
      });
      $(".clients").html(str)
      //若是有人來或者有人走，須要報一個消息
      if(info.nickname&&info._type){
          $(".msgs").append('<p class="p-info text-center">'+info.nickname+(info._type==1?'加入羣聊':'離開羣聊')+'</p>')
      }
  }

  $("#send").click(function () {
      send()
  })
  $("#word").keyup(function (e) {
      if(e.keyCode==13){
          send()
      }
  })

    function send() {
      var nickname = $("#nickname").val() || '好友'
      var msg = $("#word").val()
      var  reg = /<[^>]+>/g
      if(msg!=''){
        if(!reg.test(msg)&&!reg.test(nickname)){
            wsc.send(JSON.stringify({nickname:nickname,msg:msg}))
        }else{
            alert('輸入框內請勿輸入非法字符')
        }    
      }else{
          alert('發送內容不能爲空，請從新輸入')
      }
      
    }

  var canUse = true
  wsc.onclose = function (e) {//當服務端關閉的時候觸發
      // alert('聊天服務已經關閉了')
      canUse = false
  };






  wsc.onerror = function (e) {//錯誤狀況觸發
      console.log(e)
  }


</script>
</html>

在終端中輸入node server便可運行服務器，在瀏覽器輸入你的IP地址+端口號

這裏個人ip地址是10.9.166.56，端口號是2000，改爲你的ip地址，便可開始運行，趕忙運行，和你的朋友聊起來吧css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。