安装:
npm i express
npm i --save socket.io
# 服务端app.js中的代码
1.通过express的方式创建后端服务(必须这样写)
var app = require('express')()
var http = require('http').Server(express)
var io = require('socket.io')(http)
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html')
})
//connection是socket的默认创建连接方法
io.on('connection', (socket) => {
console.log('用户连接成功')
//socket.emit() 方法触发创建一个send方法并携带参数,让客户端socket.on()方法接收并执行send函数
socket.emit('send', {dta: '服务端向客户端发送的数据'})
//socket.on() 方法通过接收到客户端创建的msg方法并关执行
socket.on('msg', data => console.log(data))
})
http.listen(3000, () => {
console.log('3000服务启动')
})
# 客户端index.html中的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>socketIO聊天室</title>
</head>
<body>
<input id="ipt" type="text">
<button id="btn">发送</button>
</body>
</html>
//1.引入socket.io
<script src="/socket.io/socket.io.js"></script>
<script>
//2.创建socket对象
var socket = io('http://127.0.0.1:3000')
var ipt = document.getElementById('ipt')
//客户端通过socket.emit方法触发创建send方法并携带参数
socket.emit('send', { dta: '客户端向服务端发送的dta数据' })
//客户端用socket.on方法监听msg这个函数并执行
socket.on('msg', data => {
console.log(data)
})
</script>
//socket封装的断开连接的方法
socket.on('disconnect',data => {})
// PS:
textarea添加一个属性:contenteditable 可编辑固定标签内的文本
一般用来做聊天输入框