webSocket即时通信

最新推荐文章于 2024-04-27 21:32:17 发布

Byte_Dance

最新推荐文章于 2024-04-27 21:32:17 发布

阅读量482

点赞数

分类专栏： webSocket

webSocket 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了一个简单的聊天室系统的搭建过程，包括前端HTML页面的创建，使用jQuery和socket.io进行实时通信，以及后端Node.js服务器的设置。通过具体代码示例，展示了如何实现客户端与服务器之间的消息发送和接收。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先需要搭建node 环境

然后我们创建html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室系统</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="http://wulv5.com/js/socket.io.min.js"></script>


</head>
<body>
<div>

    <h1>这是一个聊天室系统</h1>

        <input type="text" id="mes">
        <input type="button" id="btn" value="发送">

    <p></p>

</div>


<script>

    //TODO
    var socket = io.connect("/");

    var mes = document.getElementById("mes"),
        btn = document.getElementById("btn");

    btn.onclick = function(){

        var val = mes.value;    //将输入框内容获取出来

        socket.send(val);   //将获取到输入框内的消息发送到远程socket服务器中

        mes.value = ""; //将输入框内容设置为空
    };


    //监听服务端发送的信息
    socket.on("message",function(mes){
        var p = document.createElement("p");    //获取到p标签

        p.innerText = "信息 : "+mes.mes + "-- ID : "+mes.id;  //将p标签的内容设置为获取到的信息



        document.body.appendChild(p);    //向body元素中追加一个p
    })



</script>
</body>

</html>

然后编写server.js服务端页面

在引入socket.io的时候需要先用npm下载socket.io包 : npm i socket.io

var http = require("http"); //Node 创建一个模块
const fs = require('fs');   //引入文件系统模块
var ws = require("socket.io");  //引入socket模块

var server = http.createServer(function (req, res) {

    var html = fs.readFileSync("./index.html");

    //连接服务器之后 执行语句
    res.end(html);

}).listen("3000");   //创建服务器实例

var io = ws(server); //将socket服务挂载到http服务中


//socket客户端实例
io.on("connection",function(socket){

    var rond = Math.random();

    console.log("有新用户进来了 : "+ rond);

    //在监听到客户端消息之后要做的事情
    socket.on("message",function(mes){
        console.log(mes);
        mes = {"mes":mes,id : rond};

        //广播消息 主动触发事件,将获取到的消息发送出去 让客户端可以通过方法捕获到
        io.emit("message",mes);
    })  //监听每一个socket客户端实例发送消息
});     //监听 连接事件