上一篇讲到了websocket,本篇提一下基于上一篇更简易的语法，那就是强大的socketio！
如果有看到该文章的小伙伴们，麻烦加一下关注及小爱心点一点，非常感谢！！！ 注意点的是以下的知识需要你对
有一定的了解，废话少说，来吧少年！ 
技术要点：NodeJs、socket.io、js、jquery、express
一、因为此次的websocket纯前端语言，需要 一个客户端 用于用户访问、一个服务端 用户服务器反馈信息。
1.初始化你的包 npm init -y
2.npm install socket.io -D (这里喜欢用yarn或者cnpm安装的都行)
3.npm install express -D (这里喜欢用yarn或者cnpm安装的都行)
// 1.服务端 server.js
//引入express
const app = require('express')();
//将express挂载创建的http服务中
const server = require('http').createServer(app);
// express处理静态资源
// 把public目录设置为静态资源
app.use(require('express').static('public'))
app.get('/', function (req, res) {
// 重定向到public文件下index.html
res.redirect('/index.html')
})
// 创建socketio
const io = require('socket.io')(server)
// socketio 连接
io.on('connection', socket => {
socket.emit('system','欢迎进入大佬的房间！')
// 接受客户端发送的信息
socket.on('sendMsg',data=>{
// 广播信息
io.emit('reveiceMsg',data)
})
});
// 服务端口
server.listen(8888);
//2 客户端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Minimal working example</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="text" class="input">
<button class="submit">发送</button>
<div class="content"></div>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io('http://localhost:8888');
socket.on('system', (data) => {
$('.content').text(data)
});
// 发送
$('.submit').on('click',function(){
socket.emit('sendMsg',$('.input').val())
})
socket.on('reveiceMsg',data=>{
console.log(data)
$('.content').append(data)
})
</script>
</body>
</html>
//3 进入你服务端开启node服务
node server.js 或者nodemon server.js
网友评论