ex5 滑鼠遊戲
http://amani.test.ntpc.edu.tw/signalr/ex/ex5.html
- 完整Server端及Client端流程如下：
- Server端ChatHub.cs完整程式碼：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using System.Threading.Tasks;
using Newtonsoft.Json;
using System.Runtime.Serialization.Formatters;
public class ChatHub : Hub
{
//宣告靜態類別，儲存user清單
public static class Users
{
public class Info
{
public Info(string n) { name = n; x = 0; y = 0; count = 0; }
public string name { get; set; }
public int x { get; set; }
public int y { get; set; }
public int count { get; set; }
}
public static Dictionary<string, Users.Info> ConnectionIds = new Dictionary<string, Users.Info>();
}
//遊戲初始
public void gameConnected(string name)
{
//將目前使用者新增至user清單
Users.ConnectionIds.Add(Context.ConnectionId, new Users.Info(name));
}
//遊戲
public void Game(Users.Info user)
{
if (Users.ConnectionIds.ContainsKey(Context.ConnectionId))
{
Users.ConnectionIds[Context.ConnectionId] = user;
}
Clients.Others.game(Users.ConnectionIds.Select(u => new { id = u.Key, name = u.Value.name, x = u.Value.x, y = u.Value.y, count = u.Value.count }).ToList());//用Others，自己不用更新座標，更具即時性
}
//儲存上一個加入的群組
public static string OriginGroup = string.Empty;
//加群組(只能在一個群組)
public Task JoinOnlyOneGroup(string groupId)
{
Groups.Remove(Context.ConnectionId, OriginGroup);
OriginGroup = groupId;
return Groups.Add(Context.ConnectionId, groupId);
}
//加群組(可多個群組)
public Task JoinGroup(string groupId)
{
OriginGroup = groupId;
return Groups.Add(Context.ConnectionId, groupId);
}
//退群組
public Task LeaveGroup(string groupId)
{
return Groups.Remove(Context.ConnectionId, groupId);
}
//傳送訊息給群組
public void SendGroup(string groupId, string message)
{
var user = Users.ConnectionIds.Where(u => u.Key == Context.ConnectionId).FirstOrDefault();
Clients.Group(groupId).show(user.Value.name + "說：" + message);
}
//傳送訊息給所有User
public void Send(string message)
{
var user = Users.ConnectionIds.Where(u => u.Key == Context.ConnectionId).FirstOrDefault();
Clients.All.show(user.Value.name + "說：" + message);
}
//傳送訊息給某人
public void SendOne(string id, string message)
{
var from = Users.ConnectionIds.Where(u => u.Key == Context.ConnectionId).FirstOrDefault();
Clients.Client(id).show("<span style='color:red'>" + from.Value.name + "密你:" + message + "</span>");
}
//新使用者連線進入聊天室
public void userConnected(string name)
{
//將目前使用者新增至user清單
Users.ConnectionIds.Add(Context.ConnectionId, new Users.Info(name));
//發送給所有人，取得user清單
Clients.All.getList(Users.ConnectionIds.Select(u => new { id=u.Key,name=u.Value.name}).ToList());
//通知其他人，有新使用者
Clients.Others.show("歡迎" + name + "進入聊天室");
}
//當使用者斷線時呼叫
//stopCalled是SignalR 2.1.0版新增的參數
public override Task OnDisconnected(bool stopCalled)
{
Clients.Others.removeList(Context.ConnectionId);
Users.ConnectionIds.Remove(Context.ConnectionId);
return base.OnDisconnected(stopCalled);
}
}
- Client端mouseGame.html完整程式碼：
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="signalR/hubs"></script>
</head>
<body>
<script>
var chat = $.connection.chatHub;//chatHub小寫
var name = "";
var x = 0;
var y = 0;
var count = 0;
//初始
$(function () {
name = Math.floor(Math.random() * 10000 + 1) + "用戶";
$(document)
.mousemove(function (e) {
//移動位置
x=e.pageX;
y=e.pageY;
$("#divMe").parent().css({ position: 'relative' });
$("#divMe").css({ top: y-15, left: x, position: 'absolute' });
//傳送座標、點擊次數至Server
sendGame();
})
.click(function () {
//點擊次數
count += 1;
sendGame();
});
});
//signalR啟動完成後，要執行的動作
$.connection.hub.start().done(function () {
//遊戲初始
chat.server.gameConnected(name);
});
//顯示遊戲訊息
chat.client.game = function (users) {
$("#divRoom").empty();
$.each(users, function (id, user) {
if (user.name != name) {//自己不顯示
var newDiv = $("<div id="+id+">" + user.name + ":" + user.count + "下" + "</div>");
newDiv.parent().css({ position: 'relative' });
newDiv.css({ top: user.y, left: user.x, position: 'absolute' });
$("#divRoom").append(newDiv);
}
});
}
//傳送座標、點擊次數至Server
function sendGame() {
//顯示座標
$("#divMe").text(name + ":" + count + "下");
//送至遠端
var info = {};
info.name = name;
info.x = x;
info.y = y;
info.count = count;
chat.server.game(info);
}
//使用者離開
chat.client.removeList = function (id) {
$('#' + id).remove();
};
</script>
<div style="width:700px;">
<div id="divRoom"></div>
<div id="divMe" style="background-color:yellow;"></div>
</div>
</body>
</html>