如发现博文存在问题，可以随时滴滴我

nodejs-websocket初使用

 

主要实现一个客户端给服务端发送消息，服务端再推送给客户端，其中客户端是有多个

首先来看一下效果

 具体代码实现：

服务端：

首先需要安装依赖

npm i nodejs-websocket -S

然后新建一个app.js文件

app.js代码如下： 

  1. const ws = require('nodejs-websocket');//引入websocket
  2. const prot = 8088;
  3.  
  4. const server = ws.createServer(connection => {
  5. 	// console.log('有一名用户连接进来了...')
  6.     connection.on("text", function (str) {
  7. 		// console.log('我来接收客户端发过来的消息' + str)
  8. 		// connection.sendText(str);//返回给客户端的数据
  9. 		server.connections.forEach(function (conn) {
  10. 			conn.sendText(str)//返回给所有客户端的数据(相当于公告、通知)
  11. 		})
  12.     })
  13.     //监听关闭
  14.     connection.on("close", function (code, reason) {
  15.         console.log("Connection closed")
  16.     })
  17.     //监听异常
  18. 	connection.on("error",() => {
  19. 		console.log('服务异常关闭...')
  20. 	})
  21. }).listen(prot)

客户端：

此处略过客户端的css部分，因为并不好看

  1. <!-- html -->
  2.  
  3. <!DOCTYPE html>
  4. <html>
  5. 	<head>
  6. 		<meta charset="utf-8" />
  7. 		<meta name="viewport" content="width=device-width, initial-scale=1">
  8. 		<link rel="stylesheet" type="text/css" href="./css/cssReset.css"/>
  9. 		<link rel="stylesheet" type="text/css" href="./css/index.css"/>
  10. 		<title></title>
  11. 	</head>
  12. 	<body>
  13. 		<div id="box">
  14. 			<div class="msg" id="msg"></div>
  15. 			<div class="bottom">
  16. 				<input type="text" id="inp" value="" />
  17. 				<button type="button" id="btn">提交</button>
  18. 			</div>
  19. 		</div>
  20. 		
  21. 		<script type="text/javascript" src="./js/index.js"></script>
  22. 	</body>
  23. </html>
  1. //javascript
  2.  
  3. let ws = new WebSocket('ws://localhost:8088');//实例化websocket
  4.  
  5. let val = '';
  6. let btn = document.getElementById('btn');//发消息按钮
  7. let msg = document.getElementById('msg');//存消息容器
  8.  
  9. //发消息
  10. ws.onopen = function(){
  11.     //点击按钮发送消息
  12.     btn.onclick = function(){
  13.         val = document.getElementById('inp').value;
  14.         ws.send(val);//发送给服务端数据
  15.     }
  16. };
  17.  
  18. //收消息
  19. ws.onmessage = function (e) {
  20.     //e 接收服务端返回的数据
  21.     var received_msg = e.data;
  22.     msg.innerHTML += received_msg += '<br>'
  23. };
  24.  
  25. //关闭连接
  26. ws.onclose = function(){ 
  27.     console.log("连接已关闭..."); 
  28. };
  29.  
  30. //抛错
  31. ws.onerror = function () {
  32.     console.log('服务异常关闭...')
  33. }

此处粘贴一个 nodejs-websocket 在npm上的文档  点击查看

posted @ 2020-03-09 04:26  webxue  阅读(3958)  评论(0)  编辑  收藏  举报