使用Node.js来建立一个自己的WebSocket服务。环境选择的是VS Code。
一、建立自己的WebSocket服务
1)首先安装一个第三方的包
我选择使用,Nodejs.websocket这个包
2)使用方法
//1.导入nodejs-websocket包
const ws = require('nodejs-websocket')
const PORT = 3000
//2.创建一个server
const server = ws.createServer(connect => {
console.log('有用户连接上来了')
})
server.listen(PORT,()=>{
console.log('websocket服务器启动成功,监听了端口' + PORT) //监听
})
3)启动websocket服务
4)在网页中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid#000;
}
</style>
</head>>
<body>
<input type="text" placeholder="输入你的内容">
<button>发送请求</button>
<!-- 显示结果-->>
<div></div>
<script>
var input = document.querySelector('input')
var button = document.querySelector('button')
var div = document.querySelector('div')
//websocket在浏览器端,H5有API
//参数1:WebSocket的服务地址
var socket = new WebSocket('ws://localhost:3000')
socket.addEventListener('open', function(){
div.innerHTML = '连接服务成功了'
})
//3.主动给websocket发送消息
button.addEventListener('click', function(){
var value = input.value
socket.send(value)
})
socket.addEventListener('message', function(e){
console.log(e.data)
div.innerHTML = e.data
})
socket.addEventListener('close', function(){
div.innerHTML = '服务器断开'
})
</script>
</body>
</html>
二、处理用户的信息及返回信息
//每次只要有用户连接,函数就会被执行,会给当前连接的用户创建一个connect对象
const server = ws.createServer(connect => {
console.log('有用户连接上来了')
//每当接收到用户传递过来的数据,这个text时间就会被触发
connect.on('text', data => {
console.log('接收到了用户的数据', data)
//给用户相应的数据 connect.send(data)
//对用户发送过来的数据,把小写转化为大写,并拼接一点内容
connect.send(data.toUpperCase() + '?!')
})
})
三、断开WebSocket服务
//只要websocket连接断开啦,colse时间就会触发
connect.on('close', () =>{
console.log('连接断开了')
})
//注册一个error,处理用户的错误信息
connect.on('error', () =>{
console.log('用户连接异常')
})