webSocket+Node+Js实现在线聊天（包含所有代码）

六卿

于 2024-05-24 20:50:02 发布

阅读量760

点赞数 5

分类专栏： # 前端基础（JS）文章标签： websocket javascript 网络协议

本文链接：https://blog.csdn.net/qq_43291759/article/details/139180325

版权

前端基础（JS）专栏收录该内容

18 篇文章 7 订阅

订阅专栏

这篇文章主要介绍了如何使用 webSocket、Node 和 Js 实现在线聊天功能。重要亮点

💻 技术选型：使用 Node.js 搭建服务器，利用 Express 框架和 Socket.io 库实现 WebSocket 通信。

📄 实现思路：通过建立数组存储聊天记录，在页面加载时发送连接请求，发送消息时广播给其他用户，前端使用 JQ 操作 DOM。

✍ 代码示例：提供了完整的代码示例，包括服务器端和客户端的实现。

webSocket+Node+Js实现在线聊天

一、首先我们需要创建一个index.js，写有关于node服务的逻辑代码，其中使用了express和socket。

二、这个时候，我们的node服务已经搭建好了，socket服务也启动了。
1、socket使用很简单
2、我们声明一个数组用来保存当前所有的聊天记录
在这里插入图片描述

3、首次进入页面的时候会主动发送socket信息
在这里插入图片描述

4、当我们发送消息的时候，其他人也可以收到对应的消息
在这里插入图片描述

5、前端使用了JQ用来操作dom,使用在线的socket连接后端的端口地址
在这里插入图片描述

三、输入用户名、输入要发送的文字、直接发送即可
在这里插入图片描述
四、对应代码

index.js

const express = require('express')
// const path = require('path')
const app = express()

let port = 3333
// app.use(express.static(path.join(__dirname, 'public')));
// app.get('/', (req, res, next) => {
//     res.writeHead(200, { 'Content-type': 'text/html;charset=utf-8' })
//     // res.end('欢迎来到express')
//     next()
// })
const server = app.listen(port, () => { console.log('成功启动express服务,端口号是' + port) })

//引入socket.io传入服务器对象 让socket.io注入到web网页服务
const io = require('socket.io')(server);
let arr = [{
    user:'系统消息',
    info:'恭喜链接websocket服务成功......'
}]
io.on('connect', (websocketObj) => {  //connect 固定的  
    console.log("====================")
    //链接成功后立即触发webEvent事件
    websocketObj.emit('webEvent', JSON.stringify(arr));
    //监听前端触发的 sendFunEvent  事件 
    websocketObj.on('sendFunEvent', (webres) => {
        console.log(webres, 'webreswebres')
        arr.push(webres)
        //触发所以的 sendFunEventCallBack 事件  让前端监听
        io.sockets.emit("sendFunEventCallBack", JSON.stringify(arr));
    })
})

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">
    <!-- 通过script的方式引入 soctke.io -->
    <!-- //不成功就使用最新版本的 直接百度 cdn socket.io -->
    <script crossorigin="anonymous"
        integrity="sha512-xbQU0+iHqhVt7VIXi6vBJKPh3IQBF5B84sSHdjKiSccyX/1ZI7Vnkt2/8y8uruj63/DVmCxfUNohPNruthTEQA=="
        src="https://lib.baomitu.com/socket.io/4.6.1/socket.io.js"></script>
    <!-- 为了操作dom方便我也引入了jq -->
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <title>myWebsocket</title>
    <style>
        body {
            position: relative;
        }

        .zzzz {
            position: fixed;
            top: 20px;
            left: 20px;
        }
        .myBoxChild{
            margin-top: 60px;
        }
        .aaa{
            padding-left: 30px;
        }
    </style>
</head>

<body>
    <div class="myBox">
        <div class="zzzz">
            <input class="name" placeholder="用户名" type="text">
            <input class="inp" placeholder="请输入" type="text">
            <button onclick="sendFun()">发送</button>
        </div>
        <div class="myBoxChild"></div>
    </div>
    <script>
        //页面打开自动链接 http://localhost:3000 后端服务
        let mySocket = io("http://127.0.0.1:3333") //直接写后端服务地址
        //一直在监听webEvent 这个事件
        mySocket.on('webEvent', (res) => {
            window.alert(JSON.parse(res)[0].info)
        })
        mySocket.on('sendFunEventCallBack', (res) => {
            console.log(res, 'sendFunEventCallBackRes')
            let data = JSON.parse(res)
            let str = ''
            for (let i = 0; i < data.length; i++) {
                str += `<p class="aaa">${data[i].user}: ${data[i].info}</p>`
            }
            $('.myBoxChild')[0].innerHTML = str
        })

        //获取input的输入内容//将来传给服务器
        function sendFun() {
            if ($('.myBox .inp').val() != '') {
                mySocket.emit('sendFunEvent', {
                    info:$('.myBox .inp').val(),
                    user:$('.myBox .name').val()
                })
                setTimeout(() => {
                    $('.myBox .inp').val('')
                })
            } else {
                alert('输入字符')
                return
            }
        }
    </script>
</body>

</html>