|
|
Demo地址：www.awbeci.xyz
websocket有java、nodejs、python，Php等等版本，我使用的是C#版本，服务器端是Fleck，github地址：https://github.com/statianzo/Fleck
这篇博客就是引用上面的一个例子教你如何使用客户端和服务器端来使用websocket的，对于英文还不错的同学，直接看上面 的源代码就可以了，下面开始讲解如何使用：
在说之前我们先来看看哪些浏览器支持websocket:
WebSocket客户端支持
浏览器支持情况
Chrome
Chrome version 4+支持
Firefox
Firefox version 5+支持
IE
IE version 10+支持
Safari
IOS 5+支持
Android Brower
Android 4.5+支持
WebSocket 服务端支持
厂商应用服务器备注
IBM
WebSphere
WebSphere 8.0 以上版本支持，7.X 之前版本结合 MQTT 支持类似的 HTTP 长连接
甲骨文
WebLogic
WebLogic 12c 支持，11g 及 10g 版本通过 HTTP Publish 支持类似的 HTTP 长连接
微软
IIS
IIS 7.0+支持
Apache
Tomcat
Tomcat 7.0.5＋支持，7.0.2X 及 7.0.3X 通过自定义 API 支持
Jetty
Jetty 7.0＋支持
现在我们看看浏览器端如何实现：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>websocket client</title>
<script type="text/javascript">
var start = function () {
var inc = document.getElementById('incomming');
var wsImpl = window.WebSocket || window.MozWebSocket;
var form = document.getElementById('sendForm');
var input = document.getElementById('sendText');
inc.innerHTML += "connecting to server ..<br/>";
// create a new websocket and connect
window.ws = new wsImpl('ws://localhost:7181/');
// when data is comming from the server, this metod is called
ws.onmessage = function (evt) {
inc.innerHTML += evt.data + '<br/>';
};
// when the connection is established, this method is called
ws.onopen = function () {
inc.innerHTML += '.. connection open<br/>';
};
// when the connection is closed, this method is called
ws.onclose = function () {
inc.innerHTML += '.. connection closed<br/>';
}
form.addEventListener('submit', function (e) {
e.preventDefault();
var val = input.value;
ws.send(val);
input.value = "";
});
}
window.onload = start;
</script>
</head>
<body>
<form id="sendForm">
<input id="sendText" placeholder="Text to send" />
</form>
<pre id="incomming"></pre>
</body>
</html>
服务器端我使用的是C#的控制台程序：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Fleck;
namespace TopoWebSocket
{
class Program
{
static void Main(string[] args)
{
FleckLog.Level = LogLevel.Debug;
var allSockets = new List<IWebSocketConnection>();
var server = new WebSocketServer("ws://0.0.0.0:7181");
server.Start(socket =>
{
socket.OnOpen = () =>
{
Console.WriteLine("Open!");
allSockets.Add(socket);
};
socket.OnClose = () =>
{
Console.WriteLine("Close!");
allSockets.Remove(socket);
};
socket.OnMessage = message =>
{
Console.WriteLine(message);
allSockets.ToList().ForEach(s => s.Send("Echo: " + message));
};
});
var input = Console.ReadLine();
while (input != "exit")
{
foreach (var socket in allSockets.ToList())
{
socket.Send(input);
}
input = Console.ReadLine();
}
}
}
}
注意要引用：using Fleck;这个在上面的链接里面已经提供了。代码都写好后，我们来运行下服务器端吧，客户端也可以，总之两个都运行好：如图：
现在你可以客户端向服务器端发送消息了，我们试试，输入你好世界：
然后我们再在服务器端发送消息给浏览器试试，如，HelloWorld
也成功了，呵呵，是不是很神奇，现在可以添加自己 的业务逻辑在里面了，是不是 觉得前后台通信变得简单了。
总结：
1、这个例子不是我写的，我只不过在github上拿过来给你们介绍，你们可以通过上面的例子fork下源代码，自己看看分析分析别人是怎么用的
2、如果有问题可以q我：1576410833
3、参考资料：http://www.ibm.com/developerworks/cn/java/j-lo-WebSocket/ |
|
QQ群⑧：
窥视卡
雷达卡
发表于 2017-2-18 12:40:06
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡