WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

今天在这里我会用C#搭建WebSocket服务端演示WebSocket的通信过程

一、WebSocket中的事件、属性和方法

  属性:

  Socket.readyState                   只读属性 readyState 表示连接状态,可以是以下值:
- 表示连接尚未建立。
- 表示连接已建立,可以进行通信。
- 表示连接正在进行关闭。
- 表示连接已经关闭或者连接不能打开。
  Socket.bufferedAmount         只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数

  事件:

  事件             事件处理程序               描述
  open     Socket.onopen 连接建立时触发
  message    Socket.onmessage    客户端接收服务端数据时触发
  error    Socket.onerror 通信发生错误时触发
  close    Socket.onclose 连接关闭时触发

  方法:

  Socket.send()                     使用连接发送数据
  Socket.close() 关闭连接

二、有了大概的了解接下来就开始实现这么一个实例

  1.客户端

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body >
<div style="margin-left: 650px;">
<form id="Form">
<input type="input" name="" id="SendInfo" value="" />
<button type="submit">提交</button>
</form> <div id="hello" style="border: dashed 1px black;height: 500px;width: 500px;margin-top: 10px;"> </div>
</div> </body>
<script type="text/javascript">
var test=function(){ var print=document.getElementById('hello');
var form = document.getElementById('Form');
var input = document.getElementById('SendInfo');
print.innerHTML += "connecting to server ..<br/>";
window.ws = new WebSocket('ws://localhost:9898/'); //监听webscoket服务端口 //监听消息状态
ws.onmessage=function(eve){
print.innerHTML+=eve.data+'<br/>'
} //监听链接状态
ws.onopen=function(){
print.innerHTML+='connection open <br/>'
} //监听关闭状态
ws.onclose = function () {
print.innerHTML += 'connection closed<br/>';
} //向服务器端发送消息
form.addEventListener('submit',function(e){
e.preventDefault();
var val="客户端:"+input.value;
ws.send(val);
input.value="";
}) } window.onload=test();
</script>
</html>

  2.服务端创建一个C#控制台程序

using Fleck;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks; namespace WebScoket
{
class Program
{
static void Main(string[] args)
{
var allScokets = new List<IWebSocketConnection>();
var server = new WebSocketServer("ws://127.0.0.1:9898"); //创建webscoket服务端实例
server.Start(scoket=> {
scoket.OnOpen = () =>                   
{
Console.WriteLine("Open");
allScokets.Add(scoket);
};
scoket.OnClose = () =>
{
Console.WriteLine("Close");
allScokets.Remove(scoket);
};
scoket.OnMessage =message => {
Console.WriteLine(message);
allScokets.ToList().ForEach(s=>s.Send(message));
};
}); var input = Console.ReadLine();
while (input != "exit")
{
foreach (var socket in allScokets.ToList())
{
socket.Send("服务端:"+input);
}
input = Console.ReadLine();
} }
}
}

  3.运行效果

 

  

  

用C#搭建WebSocket的更多相关文章

  1. 使用Node.js+Socket.IO搭建WebSocket实时应用

    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...

  2. 【C#】MVC项目中搭建WebSocket服务器

    前言 因为项目需要,前端页面中需要不断向后台请求获取一个及一个以上的状态值.最初的方案是为每个状态值请求都建立一个定时器循环定时发起Ajax请求,结果显而 易见.在HTTP1.1协议中,同一客户端浏览 ...

  3. (转)使用Node.js+Socket.IO搭建WebSocket实时应用

    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...

  4. 使用Node.js+Socket.IO搭建WebSocket实时应用【转载】

    原文:http://www.jianshu.com/p/d9b1273a93fd Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新 ...

  5. 【Netty】(7)---搭建websocket服务器

    [Netty](7)---搭建websocket服务器 说明:本篇博客是基于学习某网有关视频教学. 目的:创建一个websocket服务器,获取客户端传来的数据,同时向客户端发送数据 一.服务端 1. ...

  6. 搭建websocket消息推送服务,必须要考虑的几个问题

    近年,不论是正在快速增长的直播,远程教育以及IM聊天场景,还是在常规企业级系统中用到的系统提醒,对websocket的需求越来越大,对websocket的要求也越来越高.从早期对websocket的应 ...

  7. Netty 搭建 WebSocket 服务端

    一.编码器.解码器 ... ... @Autowired private HttpRequestHandler httpRequestHandler; @Autowired private TextW ...

  8. netty系列之:使用netty搭建websocket服务器

    目录 简介 netty中的websocket websocket的版本 FrameDecoder和FrameEncoder WebSocketServerHandshaker WebSocketFra ...

  9. 在IIS上搭建WebSocket服务器(一)

    一.搭建环境 1.System.Web.WebSockets需搭建在Windows8及Server2012以上系统的上. 2.在Windows8及Server2012以上系统的上安装IIS和WebSo ...

随机推荐

  1. elastic date时区问题解决办法

    之前介绍filter date插件时就谈到时区问题,但是没有说明白.最近在使用range查询时间范围内的数据时出现了数据量不一致的情况.特地了解了下ELK Stack中关于时区的问题. 问题: 使用k ...

  2. MySQL视图及索引

    视图 视图就是一个表或多个表的查询结果,它是一张虚拟的表,因为它并不能存储数据. 视图的作用.优点: 限制对数据的访问 让复杂查询变得简单 提供数据的独立性 可以完成对相同数据的不同显示 //创建.修 ...

  3. Prometheus(一):Prometheus+Grafana 安装配置

    一.基础环境 系统 IP 监控主机 CentOS 7 192.168.56.200 被监控主机 CentOS 7 192.168.56.201 二.Prometheus服务端安装 以下操作皆在监控主机 ...

  4. mysql数据库之运行时其他报错

    This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its de 错误解决办法 这是我们开启了bin-log, ...

  5. matplotlib 自带的几种美化样式

    1.用 matplotlib.pyplot.style.avaliable 可查看 matplotlib 自带的美化样式如下: ['bmh', 'classic', 'dark_background' ...

  6. Jmter(一)_时间戳

    显示当前时间的使用Jmeter-Tools-Function Helper Dialog的__time 显示当前时间移动的使用__timeShift 有日期移动(e.g. P2D);时(PT2H);分 ...

  7. Vue中美元$符号的意思与vue2.0中的$router 和 $route的区别

    vue的实例属性和方法 除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来.例如: var data = { a: 1 } var vm = n ...

  8. 20-C#笔记-接口

    # 1 接口的使用示例 使用interface,关键字 接口的实现和使用,和继承类似. 在使用之前,要实现接口. using System; interface IMyInterface { // 接 ...

  9. 开源许可证GPL、BSD、MIT、Mozilla、Apache和LGPL 介绍

    原文地址

  10. Windbg Register(寄存器)窗口的使用

    寄存器是位于在 CPU 的小易失性内存单位. 许多寄存器专用于特定用途,并可用于用户模式应用程序使用的其他寄存器. 基于 x86 和基于 x64 的处理器在有可用的寄存器的不同集合. 如何打开寄存器窗 ...