websocket快速搭建(node+websocket)
移动互联时代,消息的推送越来越重要,其中使用websocket的是最方便的
如何使用websocket 快速搭建一个自己的消息推送机制呢
这里就简单的使用node+html页面来实现websocket的消息传送
node篇
先写一个监听服务的文件,这里取名server.js(ws模块需要自己去安装, 命令是 npm i ws)
const WebSocket = require('ws'); // 引入模块
const ws = new WebSocket.Server({port:3000},()=>{ // 监听接口
console.log("socket start")
})
let clients = [];
ws.on('connection',(client)=>{
//console.log("client:",client)
clients.push(client)
client.send("欢迎光临");
client.on('message',(msg)=>{
console.log("来自服务器的数据",msg);
client.send(msg); // 通过send方法来给前端发送消息
//sendall();
})
client.on('close',(msg)=>{
console.log("关闭服务器连接")
})
})
之后对这个这个文件 node启动,到对应文件目录下打命令 node server.js
命令框出现“socket start”字样就是说嘛服务启动了,之后就等待前台的命令了
html篇
html这里就做一个简单消息发送,然后把发送的消息回传回来
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1></h1>
<br>
<input type="text" id="sendtext"><button onclick="send()">send</button>
<script>
const ws = new WebSocket("ws://localhost:3000/") // 监听地址端口号
ws.onopen = function(){
console.log("服务器连接")
}
ws.onmessage= (msg)=>{
console.log("来自服务器发来的数据"+msg.data)
console.log("来自服务器msg",msg)
alert("服务器返回内容:"+msg.data)
}
ws.onclose=()=>{
console.log("服务器关闭")
}
function send(){
//alert()
let msg = document.getElementById("sendtext").value;
//alert(msg)
ws.send(msg)
}
</script>
</body>
</html>
这就完成了一个简单消息发送回传的功能,需要注意的是这里发送监听的端口需要和后端监听端口一致,这里写的是3000
总结
-- 这里只是用node和html实现一个简单的功能,但是基本原理都在这里了,可以根据自己的需要来搭建自己消息推送机制。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 地球OL攻略 —— 某应届生求职总结
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】