webrtc自建信令服务器实现消息聊天

最新推荐文章于 2024-06-30 17:44:46 发布

拽拽就是我

最新推荐文章于 2024-06-30 17:44:46 发布

阅读量426

点赞数

分类专栏： webstorm前端学习之路文章标签： webstorm json html5 webrtc

本文链接：https://blog.csdn.net/qq_32355021/article/details/124262227

版权

webstorm前端学习之路专栏收录该内容

9 篇文章 0 订阅

订阅专栏

第三章 webrtc自建信令服务器实现消息聊天

一、主要内容：
1、显示人员进入、离开房间信息
2、实现多人聊天，消息展示
3、记录聊天室人数
二、直接上代码
chat.html源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ChatRoom</title>
</head>
<body>
    <div align="center">
        <table>
            <tr>
                <td>
                    <label>用户名：</label>
                    <input id = "username">
                </td>
            </tr>
                <td>
                    <label>房间号：</label>
                    <input id = "room">
                </td>
            <tr>
                <td>
                    <button id="conn">进入房间</button>
                    <button id="leave">离开房间</button>
                </td>
            </tr>
            <tr>
                <td>
                    <textarea style="width: 400; height: 100%;"
                    id="msglist" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                    <input id="msg">
                    <button id="send">发送</button>
                </td>
            </tr>
        </table>
    </div>
    <script src="socket.io.js"></script>
    <script src="chat.js"></script>
</body>
</html>

chat.js源代码

"use strict"
var unameIpt = document.querySelector("input#username")
var roomIpt = document.querySelector("input#room")
var connBtn = document.querySelector("button#conn")
var leaveBtn = document.querySelector("button#leave")
var msgListTextA = document.querySelector("textarea#msglist")
var msgIpt = document.querySelector("input#msg")
var sendBtn = document.querySelector("button#send")
var roomIpt = document.querySelector("input#room")
var socket = undefined;
var room = undefined;
var uname = undefined;
function enterSts(isEnter){
        leaveBtn.disabled = !isEnter;
        sendBtn.disabled = !isEnter;
        msgIpt.disabled = !isEnter;
        unameIpt.disabled = isEnter;
        roomIpt.disabled = isEnter;
        connBtn.disabled = isEnter;
}
function start(){
    enterSts(false);
    socket=io.connect();
    socket.on("joined",(room,uname)=>{
        enterSts(true);
        msgListTextA.value = "欢迎进入"+room+"房间"+"\n";
    });
    socket.on("otherjoined",(uname)=>{
        msgListTextA.value += uname+"进入了房间"+"\n";
    });
    socket.on("msg", (uname, msg)=>{
        msgListTextA.value += uname + ":" + msg + "\n";
    });
    socket.on("leaved",room=>{
        msgListTextA.value += "离开了" + room + "\n";
        enterSts(false);
    });
    socket.on("otherleaved", uname=>{
        msgListTextA.value += uname + "离开了" +"\n";
    })
}
function conn(){
    uname = unameIpt.value.trim();
    room = roomIpt.value.trim();
    if(uname === "" || room === "") {
        alert("请输入房间号和用户名");
        return;
    }
    socket.emit("join",room,uname);
}
function send(){
    var msg = msgIpt.value.trim();
    if (msg === "") return;
    socket.emit("msg", room, uname, msg);
    msgIpt.value = "";
}
function leave(){
    socket.emit("leave", room, uname);
}
start();
connBtn.onclick = conn;
sendBtn.onclick = send;
leaveBtn.onclick = leave;

3.httpweb.js源代码

"use strict"
var http = require("http")
var https = require("https")
var fs = require("fs")
var express = require("express")
var serveIndex = require("serve-index")
var socketIo = require("socket.io")
var log4js = require("log4js")
var logger = log4js.getLogger()
logger.level = "info"
var app = express();
app.use(serveIndex("./www"))
app.use(express.static("./www"))
var http_server = http.createServer(app)
http_server.listen(8888,"0.0.0.0")
var options = {
    key:fs.readFileSync("../cert/ssl_server.key"),
    cert:fs.readFileSync("../cert/ssl_server.pem")
};
var https_server = https.createServer(options, app)
const io = socketIo.listen(https_server)
io.on("connection", socket=>{
    logger.info("conn:" + socket.id);
    socket.on("join",(room,uname)=>{
        logger.info("join:",room+","+uname); //打印日志
        socket.join(room); //加入房间
        var myRoom = io.sockets.adapter.rooms[room];
        var users = Object.keys(myRoom.sockets).length;  //socket有多少个就有多少个人
        logger.info("room:"+room+","+users);

        socket.emit("joined",room,uname); //加入成功了
        socket.to(room).emit("otherjoined",uname); //告诉其他人xxx加入了房间
    });
    socket.on("msg", (room, uname, msg)=>{
        io.in(room).emit("msg", uname, msg);
    })
    socket.on("leave", (room, uname)=>{
        var myRoom = io.sockets.adapter.rooms[room];
        var users = Object.keys(myRoom.sockets).length;  //socket有多少个就有多少个人
        socket.leave(room);
        logger.info("room:"+room+","+(users - 1));
        socket.emit("leaved", room)
        socket.to(room).emit("otherleaved", uname);
    })
});
https_server.listen(443,"0.0.0.0")
logger.info("启动完毕。。。。")

源代码目录

拽拽就是我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
webrtc自建信令服务器实现消息聊天

第三章 webrtc自建信令服务器实现消息聊天一、主要内容：1、显示人员进入、离开房间信息2、实现多人聊天，消息展示3、记录聊天室人数二、直接上代码chat.html源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ChatRoom</title></head><body> &
复制链接

扫一扫

专栏目录