express搭配socket.io实现群聊的效果

大概的实现效果就是下面这样的 websocket 可以让服务器主动推送消息给客户端

socket.io 是大神写的封装好的 基于webscoket的插件。
后台使用 了 express 和 ejs模板引擎 搭配 socket.io 使用 最好还是有点 node.js 和express 的知识

// 后端代码
const express=require('express');
const path=require('path');
const app=express();

// 第一步  传入express的app 
const server=require('http').Server(app);
const io=require('socket.io')(server);
// 设置模板引擎 
app.set('views', path.join(__dirname, 'views'));
app.set('view engine','ejs');
app.use(express.static(path.join(__dirname, 'public')));


app.get('/',(req,res)=>{ 
	// 发送首页
	res.render('index');
})

// 第二步  监听端口要改变
server.listen(8088);
// 第三步 写socket的 代码 监听链接
 io.on('connection',(socket)=>{
	 console.log('建立链接');
	 socket.on('chat',function(data){
		 // 广播  将收到的数据发送给前台
		 io.emit('chat',{name:data.name,msg:data.msg});
	 })
 })

index.ejs
前台为了操作dom 引入jquery
后台搭配了 socket io 之后 前台访问http://localhost:8088/socket.io/socket.io.js 地址 会得到一个 socket.io.js的文件地址 这个基于你建立的服务器的 地址下
jquery 我引入的是本地的 当然你也可以引入 bootcdn 进行使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="/js/jquery.js"></script>
		<script src="http://localhost:8088/socket.io/socket.io.js"></script>
	</head>
	<body>
		<div class="chat"></div>
		<input type="text">
		<br>
		<br>
		<button id="send">发送</button>
		<script>
			var name=location.href.split('?')[1].split('=')[1];
			$(function(){
				// 链接服务器 使用websocket 进行通信
				var socket=io.connect('http://localhost:8088/');
				// 实现一个群聊的功能
				$('#send').click(function(){
					var msg=$('input').val();
					// 给服务器发送消息
					socket.emit('chat',{msg,name})
				})
				// 监听服务器发来的消息
				socket.on('chat',function(data){
					console.log(data);
					$('.chat').append(`

${data.name}说:${data.msg}

`
) }) }) </script> </body> </html>

关注我 持续更新前端 知识

你可能感兴趣的:(express)