安装websocket
yarn add nodejs-websocket
导入并创建服务端
/**
* 服务端代码
*/
// 1.导入nodejs-websocket包
const ws = require('nodejs-websocket');
const PORT = 3000
// 2.创建一个服务Server
// 每次只要有用户连接，函数就会被执行，会给当前丽娜姐的用户创建一个connect对象
const server = ws.createServer(connect =>{
console.log('有用户连接')
// 每当用户传递过来的数据，这个text时间就会触发
connect.on('text',data =>{
console.log(data.toUpperCase() + '!!!')
//给用户一个响应的数据,这里原样发回去
connect.sendText(data.toUpperCase() + '!!!')
})
// 只要websocket断开连接，close事件就会触发
connect.on('close',()=>{
console.log('链接已经关闭...')
})
// 注册一个error事件，处理客户端的错误信息
connect.on('error',()=>{
console.log('用户断开连接...')
})
})
//监听端口
server.listen(PORT,()=>{
console.log('websocket启动成功，正在监听端口' + PORT)
})
客户端基本使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 200px; height: 200px; border: 1px solid #000; background-color: whitesmoke; } </style> </head> <body> <!-- 输入内容 --> <input type="text" placeholder="输入你的内容"></input> <!-- 发送请求 --> <button>发送请求</button> <!-- 显示结果 --> <div></div> <script> // 获取元素节点 var input = document.querySelector('input') var button = document.querySelector('button') var div = document.querySelector('div') // 演示websocket在浏览器端如何使用 // h5提供了websocket的api，可以直接使用 // 创建一个websocket // 参数1是websocket服务地址 可以改成后端的地址 var socket = new WebSocket('ws://localhost:3000'); // 2.连接服务器成功时就会触发此函数 socket.addEventListener('open',function(){ div.innerHTML = '连接成功' }) // 3.主动给websocket服务发送消息 button.addEventListener('click',function(){ var value = input.value; socket.send(value) }) // 4.接收websocket服务的数据 socket.addEventListener('message',function(e){ console.log(e.data) div.innerHTML = e.data }) // 5.连接断开时触发 socket.addEventListener('close',function(){ div.innerHTML = '服务器断开连接' }) </script> </body> </html>