WebRTC学习05----在线聊天室（信令服务器的搭建）

最新推荐文章于 2025-06-02 17:42:59 发布

正在学习c

最新推荐文章于 2025-06-02 17:42:59 发布

阅读量552

点赞数

CC 4.0 BY-SA版权

分类专栏： WebRTC 学习文章标签： ubuntu

本文链接：https://blog.csdn.net/qq_43345339/article/details/123959860

WebRTC 学习专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用Node.js、Express、Socket.IO和HTTPS搭建一个在线聊天室。首先，通过npm安装指定版本的Socket.IO和log4js，接着配置并启动log4js。然后，创建HTTP和HTTPS服务器，并将Socket.IO绑定到HTTPS服务器上。在服务器端，当客户端连接并发送消息时，服务器会转发消息给房间内的其他用户。客户端通过JavaScript监听连接、消息和发送事件，实现聊天功能。最后，提供了HTML和JS文件的示例代码。

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

在线聊天室

信令服务器的搭建

// 前期准备
// 下载 指定版本的scoketio ，不然后续操作会报错
npm install socket.io@2.2.0
npm install log4js

// 修改server.js 文件
'use strict'
var http = require('http') ; 
var https = require('https') ; 
var fs = require('fs') ; 

var express = require('express') ; 
var serverIndex = require('serve-index') ; 

// socket.io 包的引入
var socketIo = require('socket.io') ; 

// 日志文件的包的引入
var log4js  = require('log4js') ; 
// log4j的配置和启动
log4js.configure({
    appenders: {
        file: {
            type: 'file',
            filename: 'app.log',
            layout: {
                type: 'pattern',
                pattern: '%r %p - %m',
            }
        }
    },
    categories: {
       default: {
          appenders: ['file'],
          level: 'debug'
       }
    }
});

var logger = log4js.getLogger();

var app = express() ; 
app.use(serverIndex('./public')) ; 
app.use(express.static('./public')) ; 

// http server 
var http_server = http.createServer(app) ; 
http_server.listen(80,'0.0.0.0') ; 

// certificate  configuration 
var options = {
	//  这儿要填写自己的安全证书
	key:fs.readFileSync('./cert/cert.key'), //.代表是当前目录
	cert:fs.readFileSync('./cert/cert.pem')
}
// https server 
var https_server = https.createServer(options,app) ; 
// bind socket.io with https_server  
var io = socketIo.listen(https_server) ; 

// connection function 
io.sockets.on('connection',(socket)=>{
	
	// 服务器接收到消息后的处理
	socket.on('message',(room,data)=>{
		// 将消息转发为除房间内的除自己以外的所有人
		console.log('I come in server message') ; // 用来做测试使用
		socket.to(room).emit('message',room,data) ; 
	}) ; 
	// 加入房间消息
	socket.on('join',(room)=>{
		// 服务端接收到加入房间的消息后，直接加入房间
		socket.join(room) ; 
		// 获得当前的房间号
		var myRoom = io.sockets.adapter.rooms[room];
		// 获得当前房间的人数
		var users = Object.keys(myRoom.sockets).length ; 
		
		// 发送信息告知 ，客户端已经发送成功
		socket.emit('joined',room,socket.id) ;
	}) ; 
}) ; 
// bind port 
https_server.listen(443,'0.0.0.0') ;

// 编写 html 、js 、css 文件 （具体步骤同前几篇文章）

<html>
	<head>
		<title>在线聊天室</title>
		<link rel="stylesheet" href="./css/main.css"></link>
	</head>
	<body>
		<table align="center">
			<tr>
				<td>
					<label>UserName: </label>
					<input type=text id="username"></input>
				</td>
			</tr>
			<tr>
				<td>
					<label>room: </label>
					<input type=text id="room"></input>
					<button id="connect">Conect</button>
					<button id="leave" disabled>Leave</button>
				</td>
			</tr>
			<tr>
				<td>
					<label>Content: </label><br>
					<textarea disabled style="line-height: 1.5;" id="output" rows="10" cols="100"></textarea>
				</td>
			</tr>
			<tr>
				<td>
					<label>Input: </label><br>
					<textarea disabled id="input" rows="3" cols="100"></textarea>
				</td>
			</tr>
			<tr>
				<td>
					<button id="send">Send</button>
				</td>
			</tr>
		</table>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
		<script src="./js/client.js"></script>
	</body>

</html>

// client.js 文件
'use strict'

// 各种按钮进行准备
// 获得输入的用户名
var userName  = document.querySelector('input#username') ;
 // 输入的房间号
var inputRoom = document.querySelector('input#room') ; 
//  连接按钮
var btnConnect  = document.querySelector('button#connect') ; 
// 输入区
var inputArea = document.querySelector('textarea#input') ; 
// 输出区
var outArea = document.querySelector('textarea#output') ; 
// 发送按钮
var btnSend = document.querySelector('button#send') ;
var socket ; 
var room ;

// 连接功能的实现
btnConnect.onclick = ()=>{
	
	// 建立连接
	socket  = io.connect() ; 
	
	// 对客户端的消息进行响应 即接收joined消息
	socket.on('joined',(room,id) =>{
		console.log('I have joined this room') ; 
		// 接收到已加入消息后，修改相应的按钮的可见性
		btnConnect.disabled = true ;
		btnSend.disabled = false ;
		inputArea.disabled = false; 
	}) ; 
	
	// 监听与服务器的连接性
	socket.on('disconnect', (socket)=>{
		btnConnect.disabled = false;
		inputArea.disabled = true;
		btnSend.disabled = true;
	});
	
	// 接收到服务器传输过来的message消息
	socket.on('message',(room,data)=>{
		console.log('I successful !!!') ; 
		outArea.scrollTop = outArea.scrollHeight;//窗口总是显示最后的内容
		outArea.value = outArea.value + data + '\r';
	}) ; 
	
	// send message  to server 
	room = inputRoom.value ; 
	socket.emit('join',room)   ;
}
// 发送消息
btnSend.onclick = ()=>{
	// 获得文本框中 的信息
	var data = inputArea.value  ; 
	// 将要发送的信息进行封装
	data = userName.value+':'+data ; 
	// 向服务端发送封装好的信息
	socket.emit('message',room,data) ;
	// 将文本框进行清空
	inputArea.value ='' ; 
}

/*
 *  Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
 *
 *  Use of this source code is governed by a BSD-style license
 *  that can be found in the LICENSE file in the root of the source
 *  tree.
 */
button {
  margin: 0 20px 25px 0;
  vertical-align: top;
  width: 134px;
}

div#getUserMedia {
  padding: 0 0 8px 0;
}

div.input {
  display: inline-block;
  margin: 0 4px 0 0;
  vertical-align: top;
  width: 310px;
}

div.input > div {
  margin: 0 0 20px 0;
  vertical-align: top;
}

div.output {
  background-color: #eee;
  display: inline-block;
  font-family: 'Inconsolata', 'Courier New', monospace;
  font-size: 0.9em;
  padding: 10px 10px 10px 25px;
  position: relative;
  top: 10px;
  white-space: pre;
  width: 270px;
}

section#statistics div {
  display: inline-block;
  font-family: 'Inconsolata', 'Courier New', monospace;
  vertical-align: top;
  width: 308px;
}

section#statistics div#senderStats {
  margin: 0 20px 0 0;
}

section#constraints > div {
  margin: 0 0 20px 0;
}

section#video > div {
  display: inline-block;
  margin: 0 20px 0 0;
  vertical-align: top;
  width: calc(50% - 22px);
}

section#video > div div {
  font-size: 0.9em;
  margin: 0 0 0.5em 0;
  width: 320px;
}

h2 {
  margin: 0 0 1em 0;
}

section#constraints label {
  display: inline-block;
  width: 156px;
}

section {
  margin: 0 0 20px 0;
  padding: 0 0 15px 0;
}

section#video {
  width: calc(100% + 20px);
}

video {
  --width: 90%;
  display: inline-block;
  width: var(--width);
  height: calc(var(--width) * 0.75);
  margin: 0 0 10px 0;
}

@media screen and (max-width: 720px) {
  button {
    font-weight: 500;
    height: 56px;
    line-height: 1.3em;
    width: 90px;
  }

  div#getUserMedia {
    padding: 0 0 40px 0;
  }

  section#statistics div {
    width: calc(50% - 14px);
  }

  video {
    display: inline-block;
    width: var(--width);
    height: 96px;
  }
}

效果图：
在这里插入图片描述