基于原生js 和 ws模块实现简单聊天室

登陆

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <input type="text" id="username" placeholder="请输入用户名">
  10.     <button id="enter">进入聊天室</button>
  11. </body>
  12. </html>
  13. <script>
  14.   ;((doc,storage,location)=>{
  15.     const oUsername = doc.querySelector('#username');
  16.     const oEnterBtn = doc.querySelector('#enter');
  18.     const init = ()=>{
  19.         bindEvent();
  20.     }
  22.     function bindEvent(){
  23.         oEnterBtn.addEventListener('click',handleEnterBtnClick,false);
  25.     }
  26.     function handleEnterBtnClick(){
  27.         console.log(oUsername);
  28.         const username = oUsername.value.trim();
  29.         if(username.length < 3 ){
  30.             return alert('用户名不能小于3位')
  31.         };
  33.         storage.setItem('username',username);
  34.         location.href = 'index.html'
  35.     };
  36.     init();
  37. })(document,localStorage,location);
  39. </script>

聊天

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <ul id="list"></ul>
  10.     <input type="text" id="message" placeholder="请输入消息">
  11.     <button id="send">发送</button>
  12. </body>
  13. </html>
  14. <script>
  15.   ; ((doc, WebSocket, localStorage, location) => {
  16.     const oList = doc.querySelector('#list');
  17.     const oMsg = doc.querySelector('#message');
  18.     const oSendBtn = doc.querySelector('#send');
  19.     const ws = new WebSocket('ws://localhost:8000');
  20.     let username = ''
  21.     const init = () => {
  22.         bindEvent();
  23.     }
  25.     function bindEvent() {
  26.         oSendBtn.addEventListener('click', handleSendBtnClick, false);
  27.         ws.addEventListener('open', handleOpen, false);
  28.         ws.addEventListener('close', handleColse, false);
  29.         ws.addEventListener('error', handleError, false);
  30.         ws.addEventListener('message', handleMessage, false);
  31.     }
  32.     function handleSendBtnClick() {
  33.         const msg = oMsg.value;
  34.         if (!msg.trim().length) return
  35.         ws.send(JSON.stringify({
  36.             user: username,
  37.             dateTime: new Date().getTime(),
  38.             message: msg
  39.         }))
  40.         oMsg.value = ''
  41.     }
  43.     function handleOpen(e) {
  44.         console.log('open', e);
  45.         username = localStorage.getItem('username')
  46.         if (!username) {
  47.             return location.href = 'entry.html'
  48.         }
  49.     }
  50.     function handleColse(e) {
  51.         console.log('close', e);
  52.     }
  53.     function handleError(e) {
  54.         console.log('error', e);
  55.     }
  56.     function handleMessage(e) {
  57.         console.log('message', e);
  58.         const msgData = JSON.parse(e.data);
  59.         oList.appendChild(createMsg(msgData))
  60.     }
  61.     function createMsg(data) {
  62.         const { user, dateTime, message } = data;
  63.         const oItem = doc.createElement('li');
  64.         oItem.innerHTML = `
  65.             <p>
  66.                 <span>${username}</span>
  67.                 <i>${new Date(dateTime)}</i>
  68.             </p>
  69.             <p>消息：${message}</p>
  70.         `
  71.         return oItem
  72.     }
  74.     init()
  75. })(document, WebSocket, localStorage, location)
  76. </script>

ws模块

const Ws = require('ws');

;((ws)=>{
    const server  = new ws.Server({
        port:8000
    })

    const init = ()=>{
        bindEvent();
    }

    function bindEvent(){
        server.on('open',handleOpen)
        server.on('close',handleClose)
        server.on('error',handleError)
        server.on('connection',handleConnection)
    }

    function handleOpen(){
        console.log('ws oepn');
    }
    function handleClose(){
        console.log('ws close');
    }
    function handleError(){
        console.log('ws error');
    }
    function handleConnection(ws){
        console.log('ws connection');
        ws.on('message',handlMessage)
    }

    function handlMessage(msg){
        console.log(msg);
        //  clients 所有客户端 => 把消息发送给每个客户端
        server.clients.forEach((c)=>{
            c.send(msg)
        })
    }
    init()

})(Ws)

心脏跳动

<script>
    let lock = false;   //避免重复连接
    const wsUrl = "ws://localhost:8000";
    let ws = null;
    createWebSocket();

    //  创建websoket
    function createWebSocket() {
        try {
            ws = new WebSocket(wsUrl);
            websocketInit();
        } catch (e) {
            console.log('catch');
            websocketReconnect(wsUrl);
        }
    }

    function websocketInit() {
        ws.onopen = function (e) {
            ws.send(10);
            //心跳检测重置
            heartCheck.start();
        };
        // 断开 web socket 连接成功触发事件
        ws.onclose = function (e) {
            websocketReconnect(wsUrl);
            console.log("连接已关闭...");
        };
        // 接收服务端数据时触发事件
        ws.onmessage = function (e) {
            console.log(e.data);
            heartCheck.start();
        };
        // 通信发生错误时触发
        ws.onerror = function (e) {
            websocketReconnect(wsUrl);
            console.log('通信错误：' + e.data);
        };
    };

    //  重新连接websoket
    function websocketReconnect(url) {
        if (lock) return;

        lock = true;
        //没连接上会一直重连，设置延迟避免请求过多
        tt && clearTimeout(tt);
        var tt = setTimeout(function () {
            createWebSocket(url);
            lock = false;
        }, 5000);
    }

    //心跳检测
    var heartCheck = {
        timeout: 5000,
        timeoutObj: null,
        serverTimeoutObj: null,
        start: function () {
            var self = this;
            this.timeoutObj && clearTimeout(this.timeoutObj);
            this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
            this.timeoutObj = setTimeout(function () {
                //发送测试信息，后端收到后，返回一个消息，
                ws.send("reset");
                self.serverTimeoutObj = setTimeout(function () {
                    ws.close();
                }, self.timeout);
            }, this.timeout)
        }
    }

</script>

const ws = require('ws');
const express = require('express');
const app = express();
const path = require('path');
app.use(express.static(path.join(__dirname, 'public')));


const server = new ws.Server({
    port: 8000
})

server.on('connection', (childs: any) => {
    //  主动给C端发送消息
    for (let i = 0; i < 10; i++) {
        childs.send(`第一次：${i}`)
    }

    //  接受c端消息
    childs.on('message', (e) => {
        console.log(e); //  接受前端发送的从连命令
        for (let i = 0; i < 10; i++) {
            childs.send(`重新连接：${i}`)
        }
    })
})

app.listen(9000)