ejs和websocket

01.ejs模板引擎

ejs就是模板引擎(在html页面中书写js)

使用方法

• 下载包 npm i ejs -S
• 引入包 const ejs=require('ejs')
• 设置可以使用ejs模板引擎
  app.set('view engine','ejs')

ejs呈递静态资源

• 呈递ejs页面 res.render('文件名字') 自动去views目录寻找该文件(文件后缀要改为ejs)
• res.render('index')
  

02.使用ejs呈递静态资源

const express=require('express');
const app=express();
//引入ejs
const ejs=require('ejs');

//设置使用ejs
app.set('view engine','ejs');

app.use('/public',express.static('./public'));

//呈递静态资源
app.get('/',(req,res)=>{
    res.render('index');
});

app.listen('8989');

03.ejs语法

• 客户端使用的时候 变量 <%= 变量 %>
<h1> <%= user%> </h1>
  h1标签里的内容为变量user
• 流程控制语句(if/else) <% %>

<% if(user){ %>
    <h1><%= user %></h1>
<% }else{ %>
    <h1>请登录</h1>
<% } %>

• ejs内部一般不做注释

ejs传参

后台：

app.get('/',(req,res)=>{
	//传递user
    res.render('index',{user:'rayshaan'});
});

前端：如果用户名存在就显示用户名，不存在显示请登录

<% if(user){ %>
    <h1><%= user %></h1>
<% }else{ %>
    <h1>请登录</h1>
<% } %>

效果

将后台代码改为：

app.get('/',(req,res)=>{
	//测试else
    res.render('index',{user:false});
});

传入数组：

后台：

app.get('/',(req,res)=>{
    let arr=[1,2,3,4];
    res.render('index',{list:arr});
});

前端：

<ul>
   <% for(let i in list){%>
       <li><%= list[i] %></li>
   <% } %>
</ul>

实现效果：

04.websocket

使用步骤

• 下载包 npm i socket.io -S
• 配置socket.io
  const http=require('http').Server(app)
const io=require('socket.io')(http)

监听端口号：

• 如果使用了socket.io不能使用app监听，要用http监听
  http.listen('8989','192.168.3.100')

配置长连接

// 配置长连接
io.on('connection',(socket)=>{
	// 接收客户端数据 on监听数据接收  chat和前端的emit保持一致
	socket.on('chat',(msg)=>{
		// 发送数据给客户端 emit发送
		io.emit('send',msg)
	})
})

前台使用socket.io

//先引入框架
<script src="socket.io/socket.io.js"></script>
<script>

let socket=io();

$('button').click(()=>{
	// 发送数据 socket.emit('发送的名字和后台接收保持一致',{数据})
	socket.emit('chat',{msg:$('input').val()})
})


socket.on('send',msg=>$("body").append(`<p>我说了${msg.msg}</p>`));
</script>

05.实现简单的实时通信对话

前台：

<h1>欢迎。。。。进入聊天室</h1>
<input type="text">
<button>发送</button>

后台：

const express=require('express');
const app=express();
// 配置socket.io
const http=require('http').Server(app);
const io=require('socket.io')(http);

// 配置ejs
const ejs=require('ejs');
app.set('view engine','ejs');

// 配置静态资源
app.use('/public',express.static('./public/'))

app.get('/',(req,res)=>{
	res.render('chat');
})


// 配置长连接
io.on('connection',(socket)=>{
	// 接收客户端数据 on监听数据接收  chat和前端的emit保持一致
	socket.on('chat',(msg)=>{
		// 发送数据给客户端 emit发送
		io.emit('send',msg)
	})
})

// 如果使用了socket.io不能使用app监听
http.listen('8989','192.168.3.100');

前台ajax：

<!-- 引入socket.io框架 自动去node_modules文件夹寻找 -->
<script src="socket.io/socket.io.js"></script>
<script>
	// 引入框架
	let socket=io();

	$('button').click(()=>{
		// 发送数据 socket.emit('发送的名字和后台接收保持一致',{数据})
		socket.emit('chat',{msg:$('input').val()})
	})


	socket.on('send',msg=>$("body").append(`<p>我说了${msg.msg}</p>`));
</script>

效果：

2021.01.09 10：44