zoukankan      html  css  js  c++  java
  • 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实现一个简单的功能,但是基本原理都在这里了,可以根据自己的需要来搭建自己消息推送机制。

  • 相关阅读:
    python3 接口测试 一般方法
    python2 接口测试一般方法.
    Postman 官网教程,重点内容,翻译笔记,
    Unity3D --对撞机/碰撞器 介绍
    MyBatis之配置文件与操作
    Eclipse连接mysql数据库jdbc下载(图文)
    MyBatis概述和环境的搭建
    样式加载不出来,浏览器控制台报错:Resource interpreted as Stylesheet but transferred with MIME type text/html
    bootstrap之navbar
    JSP中的内置标记(JSP动作)和 EL表达式
  • 原文地址:https://www.cnblogs.com/caominjie/p/11736384.html
Copyright © 2011-2022 走看看