基于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 实现圆形进度条的示例
Jul 05 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
May 14 HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 HTML / CSS
Html5自定义字体解决方法
Oct 09 HTML / CSS
html如何对span设置宽度
Oct 30 HTML / CSS
如何查看浏览器对html5的支持情况
Dec 15 HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 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 mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
csdn 博客的css样式 v3
2009/02/24 Javascript
js loading加载效果实现代码
2009/11/24 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
jQuery选中select控件 无法设置selected的解决方法
2010/09/01 Javascript
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
js简单实现竖向tab选项卡的方法
2015/05/04 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
vue实现通讯录功能
2018/07/14 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
python编写猜数字小游戏
2019/10/06 Python
python实现淘宝购物系统
2019/10/25 Python
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
大学生护理专业自荐信
2013/10/03 职场文书
巡警年度自我鉴定
2014/02/21 职场文书
中国好声音华少广告词
2014/03/17 职场文书
婚前协议书范本
2014/10/27 职场文书
话题作文之关于呼唤
2019/11/29 职场文书
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis