基于H5的webSocket通信

这里主要以一个简单例子来做说明

创建一个主服务器

1、创建一个主服务器
主服务器创建逻辑过程
/*1.通过ws模块来创建服务器2.服务器连接客户端---(给客户端编号)3.接收客户端发来的信息4.监听客户端下线
*///1.通过ws模块，来创建服务器
const webSocket = require('ws');//安装并引入webSocket模块
const ws = new webSocket.server({port:3000,hostname:'10.31.161.48';
});//2.服务器连接客户端并对客户端数量计数
var clients = {};
var count = 0;
ws.on('connection',client=>{client.name=++count;//对客户端进行编号clients[client.name]=client;//将连接到客户端存到集合内//3.接收客户端发来的数据client.on('message',msg=>{console.log(`客户端${client.name}:${msg}}`)；boardcast(client,msg);//接收到客户信息时，调用函数显示所有信息});//4.监听客户端下线client.on('close',()=>{delete clients[client.name];//清除下线客户端console.log(`客户端${client.name}closed~~~`)});//对客户端发来数据进行封装调用function boardcast(client,msg){for (var key in clients){clients[key].send(msg);//接收到客户端信息，便利客户端，显示所有信息}}

创建客户端

2、创建一个客户端
//使用h5提供的一个Socket 全局对象 进行客户端创建
const ws= new WebSocket('ws://10.31.161.48:3000');ws.onopen=()=>{// 打开WebSocket连接后立刻发送一条消息:ws.send('欢迎来到xxx直播间');
};ws.onmessage=(msg)=>{//获取所有信息展示在客户端
};//客户端监控异常信息
ws.onerror=(error)=>{if(error){console.log(error)}
};ws.onclose=()=>{console.log(`下线了`);
}

创建一个静态服务器

3、创建一个静态服务器，用来展示客户端页面信息
const express = require('express');const app = express();const path = require('path');
const hostname='10.31.161.48';
const port= 2000;//设置一个静态文件夹client，让我们的服务器找到文件client/index.html
app.use(express.static(path.jion(__dirname,'client') ) );//监听服务器
app.listen(port,hostname,()=>{console.log(`The web server is running at:http//${hostname}:${port}`)
});

4、H5页面操作
//页面布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WebSocket</title><style>.con{overflow: hidden;width: 850px;border:  rebeccapurple 2px solid;}.lt{width: 400px;height:500px;float: left;}img{width:100%;height:100%;}.rt{width: 400px;height:500px;float: right;/* margin-left:40px; */border-left: rebeccapurple 2px solid;}#content{overflow-y: scroll; width: 400px; height: 300px;/* border: solid 1px #000 */}.box{height: 50px;background: burlywood;}#msg{width: 400px; height: 50px;border: 0;}#submit{position:absolute;right:10px;bottom:-50px;width: 80px;height: 30px;background: greenyellow;}</style>
<script src="wsClient.js" charset="utf-8"></script>
</head>
<body><div class="con"><div class="lt"><img src="./img/1.jpg"></div><div class="rt"><div id="content" name="name"></div><br /><div><div style="position: relative;"><div class="box"></div><input type="text" id="msg"><button id="submit">发送</button></div></div>
</div>
</body>
</html>

html页面布局极为简单，大家可以根据自己的方式添加，让布局更美观

//内容请求发送

   <script>var msg = document.querySelector('#msg');var submit = document.querySelector('#submit');submint.onclick=function()var val=msg.value;ws.send(val)//将书写内容发送到服务端，并通过客户端显示msg.value='';//发送以后清空发送框，等待再次输入}</script>

基于H5的webSocket通信相关推荐

Spring项目中使用webservice实现h5的websocket通信
一.在项目中建立一个webservice来做后台操作. package org.calonlan.soulpower.websocket;import java.text.SimpleDateForm ...
netty案例，netty4.1中级拓展篇五《基于Netty搭建WebSocket，模仿微信聊天页面》
前言介绍本章节我们模仿微信聊天页面,开发一个基于Netty搭建WebSocket通信案例.Netty的应用方面非常广:聊天.MQ.RPC.数据等等,在5G到来的时候更加需要大量数据传输,Netty的 ...
Netty作为服务端的websocket通信
http协议是无状态的,因此导致客户端每次通信都需要携带标识(session)给服务端,以此来识别是哪个客户端发送过来的信息.但是当服务端主动推送给客户端时就无法实现了,因为服务端不知道客户端在哪,此 ...
基于asp.netCoreWebApi的webSocket通信示例(net6)
背景: 在阿里云服务器中搭建了常规的tcp server服务(基于.net framework 4.0).用以实现远程控制家里的鱼缸灯,办公室的电脑开关机等功能.客户端采用PC桌面端和微信小程序端. ...
class没有发布到tomcat_基于Tomcat的Websocket范例及permessage-deflate扩展特性的研究
0x00 前言当前已经成为和空气水食物并列的生存必需品的互联网,其典型的应用大多采用基于HTTP协议的B/S这一基础架构.作为自1994网景发布第一款浏览器以来就存在的这一技术体系,尽管20多年来不 ...
简易 IM 双向通信电脑端 GUI 应用——基于 Netty、WebSocket、JavaFX 、多线程技术等
简易 IM 双向通信电脑端 GUI 应用--基于 Netty.WebSocket.JavaFX .多线程技术等说明运行效果核心代码完整代码参考知识说明这是一款使用 Netty 来实现 ...
Python3+WebSockets实现WebSocket通信
一.说明 1.1 背景说明前端时间同事说云平台通信使用了一个websocket的东西,今天抽空来看一下具体是怎么个通信过程. 从形式上看,websocket是一个应用层协议,socket是数据链路层 ...
基于Node.js + WebSocket 的简易聊天室
代码地址如下: http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.j ...
WebSocket 通信原理和详细使用（十六）
今天我们详细分析WebSocket 通信原理和使用一.什么是 WebSocket ? WebSocket --一种在 2011 年被互联网工程任务组( IETF )标准化的协议.WebSocket ...

基于H5的webSocket通信

基于H5的webSocket通信

基于H5的webSocket通信相关推荐

最新文章

热门文章