websocket聊天室的基础原理（html5，nodejs搭建服务器）

最新推荐文章于 2023-10-18 23:59:44 发布

Gjanuary

最新推荐文章于 2023-10-18 23:59:44 发布

阅读量2.2k

点赞数

分类专栏：前端学习记录文章标签： websocket html5

本文链接：https://blog.csdn.net/Gjanuary/article/details/121248437

版权

前端学习记录专栏收录该内容

75 篇文章 0 订阅

订阅专栏

本文档展示了如何通过Node.js搭建WebSocket服务器，并创建一个简单的客户端HTML页面，实现实时通信。首先，通过npm安装nodejs-websocket模块，然后创建服务器端app.js，监听3000端口并处理用户连接及消息。客户端使用HTML和JavaScript，建立WebSocket连接，监听打开事件和按钮点击事件，实现信息发送功能。

摘要由CSDN通过智能技术生成

（1）：搭建nodejs服务器以后，cnpm install nodejs-websocket 进行安装这个模块，会生成一个node_modules文件夹
在这里插入图片描述
（2）创建websocket服务器app.js：

// 导入nodejs-websocket包
const ws = require('nodejs-websocket')
// 创建一个服务
// 每次只要有用户链接下面的代码就会执行一次，会给当前链接用户创建对象
var server = ws.createServer((conn)=>{
   console.log('有用户连接上来了')
   conn.on('text',(data)=>{
   		console.log('接收到用户信息：',data)
   });
})
ws.addEventListener('message',(e)=>{
	console.log(e.data)
});
server.listen(3000,()=>{
	console.log('websocket server starting')
})

（3）创建客户端index.html文件

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			border: 1px solid black;
		}
	</style>
</head>
<body>
<input type="text" placeholder="输入信息..."/>
<button>发送</button>
<div></div>
<script>
var divHtml =  document.querySelector('div');
var buttonHtml =  document.querySelector('button');
var inputHtml = document.querySelector('input');
var ws = new WebSocket("ws://localhost:3000");
 
ws.addEventListener('open',function(){
     divHtml.innerHTML = '已经连接成功';

})
// 主动给服务器发送消息
buttonHtml.addEventListener('click',()=>{
  var value = inputHtml.value;
  ws.send(value);
});


</script>
</body>
</html>

测试：
在这里插入图片描述

Gjanuary

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
websocket聊天室的基础原理（html5，nodejs搭建服务器）

（1）：搭建nodejs服务器以后，cnpm install nodejs-websocket 进行安装这个模块，会生成一个node_modules文件夹（2）创建websocket服务器app.js：// 导入nodejs-websocket包const ws = require('nodejs-websocket')// 创建一个服务// 每次只要有用户链接下面的代码就会执行一次，会给当前链接用户创建对象var server = ws.createServer((conn)=>{
复制链接

扫一扫