C50108
Search…
2019/0610/番外篇 Web Socket 即時連線& 就業前準備與技巧

MVC 範本
作法
Controller View 需要Log才需要Model
不用Home做增加新的API控制器空的不用範本
Using System.Web
安裝插件並Using
Nuget裝Microsoft WebSockets
原理
Ip + Port 綁再一起就是 sockets
在傳輸層自訂傳輸方式
不同語言有不同物件C++ WinSock
Clint -> Reguest -> Server -> Response -> Clint
第七層 Http 逃脫不出這種框架會有限制
更新必須要按重新整理,你一年十年不按伺服器更新你畫面也不會有更動
客戶端要允許Sockets讓伺服器推送資料給客戶端
在一樣在Http方式下利用WebSockets通知
首先利用 HttpResponseMessage物件
在途中把http封包拿走
再來利用HttpContext物件承接
Current AcceptWebSocketRequest ( 當前 接受 web插座回應
Handler處理器
待補
Return Request 要求 CreateResponse(HttpStatusCode.SwitchingProtocols);
HTTP狀態碼。交換協議
接著新增一個 class 用於編寫自己的 WebSocket 的方法
但記得要繼承 class ChatWebSocketHandler:WebSocketHandler
首先
new一個字串存聊天的人的姓名
WebSocketCollection 採集
一定要有個東西觸發 打開 websockets
複寫OnOpen
複寫 OnMessage
選API目的是為了這個config
裡面有寫API的預設網址要到這裡查
@RenderSection("scripts", required: false)
接著編寫View
寫JQ配合按鈕觸發傳送值
還沒講Layout 但這邊先提一下
配合@RenderSection("scripts", required: false)
就能寫獨立頁面的 script 並寫放在正確的位置 不然會亂掉
@section scripts { }
接著要使用JS的物件WebSocket把url傳給他
發生錯誤不會有任何訊息,所以為了好偵錯 onerror
接著寫 DOM增加訊息元素li到ul裡面
Log到console.log();會比較好偵錯
結果Var ws = new WebSocket(url);
hand shack錯誤 ? 丟到網路前就錯誤
再開個新的專案 剛剛的少了一些東西
必須把Web API打勾
什麼都沒改 就都ok了
發言後伺服器會
Brocass給所有人?
配合jq dom Attribute Readonly disable display none show讓使用者體驗更好
離開聊天室 反著做 jq
接著講一下要怎樣把聊天室架起來?
IIS實體路徑找專案資料夾直接選擇即可
但是要改送sockets的Ip 改為伺服器的IP

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Http;
namespace WebSocket2
{
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API 設定和服務
// Web API 路由
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web;
using Microsoft.Web.WebSockets;
namespace WebSocket2.Controllers
{
public class ChatController : ApiController
{
public HttpResponseMessage Get(string username)
{
HttpContext.Current.AcceptWebSocketRequest(new ChatWebSocketHandler(username));
return Request.CreateResponse(HttpStatusCode.SwitchingProtocols);
}
class ChatWebSocketHandler : WebSocketHandler
{
private string _username;
private static WebSocketCollection _chatClients = new WebSocketCollection();
public ChatWebSocketHandler(string username)
{
_username = username;
}
public override void OnOpen()
{
_chatClients.Add(this);
}
public override void OnMessage(string message)
{
_chatClients.Broadcast(_username + ":" + message);
}
}
}
}

@{
ViewBag.Title = "Home Page";
}
<div class="jumbotron">
<h1>ASP.NET</h1>
<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
<p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>
<div class="row">
<div class="col-md-12">
<fieldset>
<legend>聊天室</legend>
<input id="username" name="username" type="text" /><input id="btnConnect" type="button" value="進入聊天室" />
<hr />
<input id="message" name="message" type="text" readonly="readonly" /><input id="btnSend" type="button" value="發言" disabled="disabled" />
<hr />
<input id="btnClose" type="button" value="離開聊天" />
<ul id="output"></ul>
</fieldset>
</div>
</div>
@section scripts{
<script>
$('#btnConnect').click(function () {
var url = "ws://10.10.3.189/api/Chat?username=" + $('#username').val();
var ws = new WebSocket(url);
console.log(ws);
$('#message').removeAttr('readonly');
$('#btnSend').removeAttr('disabled');
$('#username').attr('readonly', 'readonly');
$('#btnConnect').attr('disabled', 'disabled');
ws.onopen = function () {
ws.send("已進入聊天!!");
}
ws.onerror = function () {
alert('有錯誤');
}
ws.onmessage = function (e) {
$('#output').append($('<li>').text(e.data));
console.log(e.data);
}
$('#btnSend').click(function () {
ws.send($('#message').val());
});
$('#btnClose').click(function () {
ws.close();
$('#username').removeAttr('readonly');
$('#btnConnect').removeAttr('disabled');
$('#message').attr('readonly', 'readonly');
$('#btnSend').attr('disabled', 'disabled');
});
});
</script>
}

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - 我的 ASP.NET 應用程式</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("應用程式名稱", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("首頁", "Index", "Home")</li>
<li>@Html.ActionLink("關於", "About", "Home")</li>
<li>@Html.ActionLink("連絡人", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>&copy; @DateTime.Now.Year - 我的 ASP.NET 應用程式</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>

Copy link
On this page
#番外篇 即時聊天室 Web Socket
#就業前準備與技巧
PDCA(Plan-Do-Check-Act)循環式品質管理循環