基于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悬停效果案例应用
Nov 21 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
纯css3使用vw和vh实现自适应的方法
Feb 09 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
Mar 08 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
HTML5添加禁止缩放功能
Nov 03 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 HTML / CSS
Canvas绘制像素风图片的示例代码
Sep 25 HTML / CSS
详解CSS中postion和opacity及cursor的特性
Aug 14 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封装的多文件上传类实例与用法详解
2017/02/07 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
python实现巡检系统(solaris)示例
2014/04/02 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
浅谈Python中的私有变量
2018/02/28 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
使用Python在Windows下获取USB PID&amp;VID的方法
2019/07/02 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
Python实现ATM系统
2020/02/17 Python
python多线程实现同时执行两个while循环的操作
2020/05/02 Python
对公司合理化的建议书
2014/03/12 职场文书
节能宣传周活动总结
2014/05/08 职场文书
雷锋精神演讲稿
2014/05/13 职场文书
服务承诺书范文
2014/05/19 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
新店开张宣传语
2015/07/13 职场文书
MySQL的Query Cache图文详解
2021/07/01 MySQL
基于Go语言构建RESTful API服务
2021/07/25 Golang
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers