在线聊天室
信令服务器的搭建
// 前期准备
// 下载 指定版本的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;
}
}
效果图：
