zoukankan      html  css  js  c++  java

  • 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上的文档  点击查看
  • 相关阅读:
    Spring中的AOP实现思路
    手写IOC-SPRINGPMVC-CONNPOOL
    职责链模式
    判断一个二叉树是不是对称二叉树
    合并区间
    shell命令中用source 和sh（或者bash）执行脚本的区别，以及export的作用
    angular指令的compile，prelink 和 postlink以及controller
    angular的启动原理
    高并发优化方法
    搭建ssm框架的一个小坑
  • 原文地址：https://www.cnblogs.com/xue-shuai/p/12446559.html
Copyright © 2011-2022 走看看