第三章 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("启动完毕。。。。")
源代码目录
|