基于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媒体查询(Media Queries)介绍
Sep 12 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 HTML / CSS
CSS3+js实现简单的时钟特效
Mar 18 HTML / CSS
CSS3 :default伪类选择器使用简介
Mar 15 HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 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数据类型的总结分析
2013/06/13 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
BootStrap的双日历时间控件使用
2017/07/25 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
python实现输入数字的连续加减方法
2018/06/22 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
卫校毕业生自我鉴定
2013/10/31 职场文书
财务学生的职业生涯发展
2014/02/11 职场文书
企业宣传策划方案
2014/05/29 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
保证金退回承诺函格式
2015/01/21 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js