websoket(聊天室)

莲青见卿

已于 2023-08-09 16:19:37 修改

阅读量127

点赞数

分类专栏：前端基础文章标签： javascript html5 node.js

于 2023-08-08 15:41:17 首次发布

本文链接：https://blog.csdn.net/vh_yunyangyumo/article/details/132168052

版权

前端基础专栏收录该内容

13 篇文章 0 订阅

订阅专栏

此案例仅为简单基础案例展示。

# chat 聊天室

  ## 项目结构
    js 
    entry.html
    index.html

  ## 启动项目
    cd chat
    npm i
    npm run dev
    http://localhost:3000/

  ## 使用
    分别用两个浏览器打开 http://localhost:3000/


# server 本机服务模拟

  ## 项目结构
    index.js

  ## 启动服务
    cd server
    npm i -g nodemon (如已全局安装过则无需安装)
    npm i
    nodemon index.js# chat 聊天室

  ## 项目结构
    -| js 
      - entry.js
      - index.js
    - entry.html
    - index.html
    - package.json

  ## 启动项目
    cd chat
    npm i
    npm run dev
    http://localhost:3000/

  ## 使用
    分别用两个浏览器打开 http://localhost:3000/


# server 本机服务模拟

  ## 项目结构
    - index.js
    - package.json

  ## 启动服务
    cd server
    npm i -g nodemon (如已全局安装过则无需安装)
    npm i
    nodemon index.js

server / index.js

const Ws = require('ws');

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

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

    function bindEvent() {
        server.on('open', openHandler);
        server.on('close', closeHandler);
        server.on('error', errorHandler);
        server.on('connection', connectionHandler);
    };

    function openHandler(e) {
        console.log('open', e);
    };

    function closeHandler(e) {
        console.log('close', e);
    };

    function errorHandler(e) {
        console.log(e);
    };

    function connectionHandler(ws) {
        ws.on('message', handlerSend);
    };

    function handlerSend(message) {
        console.log(message);
        const mes = JSON.parse(message)
        server.clients.forEach((i)=>{
            i.send(JSON.stringify(mes));
        })
    };

    init();

})(Ws);

server / package.json

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ws": "^8.13.0"
  }
}

chat / entry.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
</head>
<body>
    <input id="username"/> <button id="enter">登录</button>
    <script src="./js/entry.js"></script>
</body>
</html>

chat / index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天室</title>
</head>
<body>
    <input type="text" id="message"> <button id="send">发送</button>
    <ul id="messageList"></ul>
    <script src="./js/index.js"></script>
</body>
</html>

chat / js / entry.js

((doc, Storage, location) => {

    const userName = doc.querySelector('#username');
    const enterBtn = doc.querySelector('#enter');

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

    function bindEvent() {
        enterBtn.addEventListener('click', enterBtnClickFun, false);
    };

    function enterBtnClickFun() {
        const user = userName.value.trim();
        if(user.length === 0) return alert('请输入用户名');
        Storage.setItem('username', user);
        location.href = 'index.html';
    }

    init();
    
})(document, localStorage, location);

chat / js / index.js

((doc, Storage, location, WebSocket) => {

    const message = doc.querySelector('#message');
    const messageList = doc.querySelector('#messageList');
    const sendBtn = doc.querySelector('#send');
    const ws = new WebSocket('ws:localhost:8000');

    const init = () => {
        const user = Storage.getItem('username');
        console.log(user,'user')
        if(!user) return location.href = 'entry.html';
        bindHandler();
    };

    function bindHandler() {
        sendBtn.addEventListener('click', sendBtnClickFun, false);
        ws.addEventListener('open', openHandler, false);
        ws.addEventListener('close', closeHandler, false);
        ws.addEventListener('error', errorHandler, false);
        ws.addEventListener('message', messageHandler, false);
    };

    function openHandler(e) {
        console.log('已链接');
    };

    function closeHandler(e) {
        console.log('已断开');
    };

    function errorHandler(e) {
        console.log('出错');
    };

    function messageHandler(e) {
        console.log('发送信息',e);
        const mesData = JSON.parse(e.data);
        const item = doc.createElement('li');
        item.innerHTML = `<p>${mesData.user} ${mesData.dateTime}</p>
        <p>${mesData.text}</p>`
        messageList.appendChild(item)
    };

    function sendBtnClickFun() {
        const mes = message.value.trim();

        if(mes.length === 0) return alert('请输入消息');

        const params = JSON.stringify({
            user: Storage.getItem('username'),
            dateTime: new Date().getTime(),
            text: mes
        })
        ws.send(params)
        message.value = '';
    }

    init();

})(document, localStorage, location, WebSocket)

chat / package.json

{
  "name": "chat",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "vite": "^1.0.0-rc.13"
  },
  "scripts": {
    "dev": "vite"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}