[网络协议] websocket聊天室的基础原理（html5，nodejs搭建服务器）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 网络协议 -> websocket聊天室的基础原理（html5，nodejs搭建服务器） -> 正文阅读

[网络协议]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)=>{
   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>