基于HTML5的WebSocket的实例代码


Posted in HTML / CSS onAugust 15, 2018

基于HTML5的WebSocket的实例代码

客户端代码:

<html>
<head>
<script>
var socket;
if ("WebSocket" in window) {
var ws = new WebSocket("ws://127.0.0.1:8181");
socket = ws;
ws.onopen = function() {
console.log('连接成功');
};
ws.onmessage = function(evt) {
var received_msg = evt.data; 
document.getElementById("showMes").value+=evt.data+"\n";
};
ws.onclose = function() {
alert("断开了连接");
};
} else {
alert("浏览器不支持WebSocket");
}
function login(){
var message=document.getElementById("name").value+":"+document.getElementById("mes").value;
socket.send(message);
}
</script>
</head>
<body>
<textarea rows="3" cols="30" id="showMes" style="width:300px;height:500px;"></textarea>
<br/>
<label>名称</label>
<input type="text" id="name"/>
<br/>
<label>消息</label>
<input type="text" id="mes"/>
<button onclick="login();">发送</button>
</body>
</html>

winform服务端代码:

注:需先引入Fleck包

基于HTML5的WebSocket的实例代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows.Forms;
using Fleck;
namespace socketService
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
CheckForIllegalCrossThreadCalls = false;
}
private void Form1_Load(object sender, EventArgs e)
{
//保存所有连接
var allSockets = new List<IWebSocketConnection>();
//初始化服务端
var server = new WebSocketServer("ws://0.0.0.0:8181");
//开始监听
server.Start(socket =>
{
//有客户端连接触发
socket.OnOpen = () =>
{
textBox3.Text += socket.ConnectionInfo.ClientIpAddress + " 连接 \r\n";
allSockets.Add(socket);
};
//有客户端断开触发
socket.OnClose = () =>
{
textBox3.Text += socket.ConnectionInfo.ClientIpAddress + " 断开连接 \r\n";
allSockets.Remove(socket);
};
//接收客户端发送的消息
socket.OnMessage = message =>
{
textBox3.Text += socket.ConnectionInfo.ClientIpAddress + " 发送了消息:" + message + "\r\n";
//发送接收到的消息给所有客户端
allSockets.ToList().ForEach(s => s.Send(message));
};
});
}
}
}

总结

以上所述是小编给大家介绍的基于HTML5的WebSocket的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
详解CSS3伸缩布局盒模型Flex布局
Aug 20 HTML / CSS
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 HTML / CSS
css3学习心得分享
Aug 19 HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 HTML / CSS
canvas画布实现手写签名效果的示例代码
Apr 23 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
Oct 17 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
Jul 15 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
Apr 29 HTML / CSS
AmazeUI 图标的示例代码
Aug 13 HTML / CSS
CSS 实现Chrome标签栏的技巧
Aug 04 HTML / CSS
css3应用示例:新增的选择器
Mar 16 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 #HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 #HTML / CSS
Html5页面在微信端的分享的实现方法
Aug 30 #HTML / CSS
canvas粒子动画背景的实现示例
Sep 03 #HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 #HTML / CSS
html5新特性与用法大全
Sep 13 #HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 #HTML / CSS
You might like
PHP与SQL注入攻击[三]
2007/04/17 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
2014/07/01 PHP
php上传大文件设置方法
2016/04/14 PHP
走出JavaScript初学困境—js初学
2008/12/29 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
js实现坦克大战游戏
2020/02/24 Javascript
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
python的keyword模块用法实例分析
2015/06/30 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
如何利用python发送邮件
2020/09/26 Python
重大事项社会稳定风险评估方案
2014/06/15 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
个人租房协议书
2014/11/28 职场文书
党风廉正建设责任书
2015/01/29 职场文书
销售工作决心书
2015/02/04 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
网络舆情信息简报
2015/07/21 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
使用Redis实现实时排行榜功能
2021/07/02 Redis
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python
Redis高并发缓存架构性能优化
2022/05/15 Redis