客户端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="js/socket.io.js"></script>
</head>
<body>
<div>
<div id="content">
</div>
</div>
<div>
<input type="text" id="input" />
<button class="el-button el-button-primary el-button-large" type="button" onclick="say()">发送消息</button>
</div>
<script>
// 发送连接事件给服务端，参数为服务端地址
var socket = io.connect('http://localhost:80')
socket.on('message',function(data){
let p = document.createElement('p')
p.innerHTML = `机器人：<span>${data.hello}</span>`
document.getElementById('content').appendChild(p)
})
// 监听 news 会话
socket.on('news', function (data) {
console.log(data);
let html = document.createElement('p')
html.innerHTML = `大傻逼说：<span>我知道了，你说“${data.hello}”</span>`
document.getElementById('content').appendChild(html)
});
// 按钮点击事件
function say() {
let t = document.getElementById('input').value
if (!t) return
let html = document.createElement('p')
html.innerHTML = `你细声说：<span>${t}</span>`
document.getElementById('content').appendChild(html)
socket.emit('say', { my: t})
}
</script>
</body>
</html>
服务器端代码：
// 创建服务器
let app = require('http').createServer()
// 通关服务器生成socket对象
let io = require('socket.io')(app)
app.listen(80,(req,res)=>{
console.log('链接成功');
})
// 实时通信
// 监听连接事件，on为监听
io.on('connection',function(socket){
// 发送事件，emit为发送
socket.emit('message',{hello:'你好我是机器人'})
socket.emit('news',{hello:'大傻逼'})
socket.on('say',function(data){
socket.emit('message',{hello:'你说啥我听不清'})
})
})
浏览器报错信息：
Failed to load resource: net::ERR_CONNECTION_REFUSED
socket.io.js:6 GET http://localhost/socket.io/?EIO=4&transport=polling&t=NKd8yIF net::ERR_CONNECTION_REFUSED