webSocket即时通信

本文详细介绍了一个简单的聊天室系统的搭建过程,包括前端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客户端实例发送消息
});     //监听 连接事件

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值