socket.io and express
关于socket.io的使用参见官网文档socket.io,这里我们主要用express来实现
1.Installing socket.io and express
npm install socket.io
npm install express --save (--save表示把依赖包添加进package.json中)
- PS.yarn来安装
yarn add
2.express的使用
// 创建一个名为app.js的文件
let express = require('express') // 引入
let app = express() // 实例化 new express() 可去掉new
// 配置路由
app.get('/',(req,res)=>{
res.send('hello world~')
})
app.listen(3000); // 监听端口号3000 默认127.0.0.1
// 启动应用
node app.js
3. ejs
e表示effective,高效的,ejs是一套简单的模板引擎,在express中可以很好的支持(another jade)
1. 安装ejs
npm install ejs
2. 配置express模板引擎
app.set('view engine','ejs')
3. 在expres中使用ejs
app.get('/', (req, res) => {
res.render('hello', {
"msg": "hello world~~"
})
})
// res.send以后可以用res.render替换
ps.设置模板的位置
app.set('view',__dirname+'/views') // __dirname当前文件的目录,ejs默认查找views下的文件
4. socket.io+express
- Server端(app.js)
let express = require('express')
let app = express()
// 或者合为一句 let app = require('express')()
let server = require('http').Server(app)
let io = require('socket.io')(server)
// 监听端口号
server.listen(3000,'127.0.0.1');
// 其他配置
app.set('view engine', 'ejs') // 配置express模板引起为ejs模板
app.use(express.static('public')); // 给public目录下文件提供静态web服务
// 路由 访问localhost:3000/
app.get('/', (req, res) => {
res.render('index', { // ejs默认在 views中找模板index.ejs
"msg":"hello world~~~"
})
})
// 写socket.io代码
io.on('connection', (socket) => {
console.log('和客户端建立连接'+socket.id)
// io.emit 广播 群聊 给所有在线的人发消息
// socket.emit 谁给我发的消息 返回消息给谁,智能机器人的实现
//监听客户端发来的消息
socket.on('message', (data) => {
console.log(data)
io.emit('server-message', data) // 服务器给客户端发送数据 在线聊天室
})
})
- Client端(index.ejs) 这里为了方便引了jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
<style>
.box {
width: 300px;
height: 300px;
border: 1px solid skyblue;
margin-top: 40px;
overflow-y: scroll;
}
.btn button{
display: inline-block
}
input{
display: inline-block;
}
</style>
</head>
<body>
<h4 class="header">聊天室 清空命令行cls</h4>
<div class="box">
<div class="list" id="list"></div>
<div class="footer"></div>
</div>
<div class="btn">
<input type="text" id="msg">
<button id="send">发送</button>
</div>
<!-- 引入服务端js -->
<script src="http://127.0.0.1:3000/socket.io/socket.io.js"></script>
<script src="js/jquery.js"></script>
<script>
$(function () {
let socket = io.connect('http://127.0.0.1:3000/');
let username = '我是' + Math.floor(Math.random() * 10)+'号'
// 群聊功能 - 聊天室
$('#send').click(() => {
let msg = $('#msg').val()
socket.emit('message', {
'username': username,
'msg': msg
})
// $('.list').append(`<p><b>${username} : </>${msg}</p>`)
// 每次发完消息清空input
$('#msg').val('')
})
// 监听后台来的消息
socket.on('server-message',(data)=>{
console.log(socket.id)
let username = data['username']
let msg = data['msg']
$('.list').append(`<p><b>${username} : </>${msg}</p>`)
// 让最后一行在最后面
$('.footer').get(0).scrollIntoView()
})
})
</script>
</body>
</html>
- 以上是在线聊天室的简单实现,在此基础上完善界面编写和部分后台逻辑编写,在接上数据库等,就可以做出很多好玩的事儿了
- 另外私聊和分组群聊以后再更新~~~
网友评论