NetCore WebSocket即时通讯示例

2025-05-29 0 91

NetCore WebSocket 即时通讯示例,供大家参考,具体内容如下

1.新建Netcore Web项目

NetCore WebSocket即时通讯示例

2.创建简易通讯协议

?

1

2

3

4

5

6

7
public class MsgTemplate

{

public string SenderID { get; set; }

public string ReceiverID { get; set; }

public string MessageType { get; set; }

public string Content { get; set; }

}

SenderID发送者ID

ReceiverID 接受者ID

MessageType 消息类型 Text Voice 等等

Content 消息内容

3.添加中间件ChatWebSocketMiddleware

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105
public class ChatWebSocketMiddleware

{

private static ConcurrentDictionary<string, System.Net.WebSockets.WebSocket> _sockets = new ConcurrentDictionary<string, System.Net.WebSockets.WebSocket>();

private readonly RequestDelegate _next;

public ChatWebSocketMiddleware(RequestDelegate next)

{

_next = next;

}

public async Task Invoke(HttpContext context)

{

if (!context.WebSockets.IsWebSocketRequest)

{

await _next.Invoke(context);

return;

}

System.Net.WebSockets.WebSocket dummy;

CancellationToken ct = context.RequestAborted;

var currentSocket = await context.WebSockets.AcceptWebSocketAsync();

//string socketId = Guid.NewGuid().ToString();

string socketId = context.Request.Query["sid"].ToString();

if (!_sockets.ContainsKey(socketId))

{

_sockets.TryAdd(socketId, currentSocket);

}

//_sockets.TryRemove(socketId, out dummy);

//_sockets.TryAdd(socketId, currentSocket);

while (true)

{

if (ct.IsCancellationRequested)

{

break;

}

string response = await ReceiveStringAsync(currentSocket, ct);

MsgTemplate msg = JsonConvert.DeserializeObject<MsgTemplate>(response);

if (string.IsNullOrEmpty(response))

{

if (currentSocket.State != WebSocketState.Open)

{

break;

}

continue;

}

foreach (var socket in _sockets)

{

if (socket.Value.State != WebSocketState.Open)

{

continue;

}

if (socket.Key == msg.ReceiverID || socket.Key == socketId)

{

await SendStringAsync(socket.Value, JsonConvert.SerializeObject(msg), ct);

}

}

}

//_sockets.TryRemove(socketId, out dummy);

await currentSocket.CloseAsync(WebSocketCloseStatus.NormalClosure, "Closing", ct);

currentSocket.Dispose();

}

private static Task SendStringAsync(System.Net.WebSockets.WebSocket socket, string data, CancellationToken ct = default(CancellationToken))

{

var buffer = Encoding.UTF8.GetBytes(data);

var segment = new ArraySegment<byte>(buffer);

return socket.SendAsync(segment, WebSocketMessageType.Text, true, ct);

}

private static async Task<string> ReceiveStringAsync(System.Net.WebSockets.WebSocket socket, CancellationToken ct = default(CancellationToken))

{

var buffer = new ArraySegment<byte>(new byte[8192]);

using (var ms = new MemoryStream())

{

WebSocketReceiveResult result;

do

{

ct.ThrowIfCancellationRequested();

result = await socket.ReceiveAsync(buffer, ct);

ms.Write(buffer.Array, buffer.Offset, result.Count);

}

while (!result.EndOfMessage);

ms.Seek(0, SeekOrigin.Begin);

if (result.MessageType != WebSocketMessageType.Text)

{

return null;

}

using (var reader = new StreamReader(ms, Encoding.UTF8))

{

return await reader.ReadToEndAsync();

}

}

}

}

控制只有接收者才能收到消息

?

1

2

3

4
if (socket.Key == msg.ReceiverID || socket.Key == socketId)

{

await SendStringAsync(socket.Value,JsonConvert.SerializeObject(msg), ct);

}

4.在Startup.cs中使用中间件

?

1

2
app.UseWebSockets();

app.UseMiddleware<ChatWebSocketMiddleware>();

5.建立移动端测试示例 这里采用Ionic3运行在web端

创建ionic3项目略过 新手可点这里查看 或者有Angular2/4项目竟然可直接往下看

(1) 启动Ionic项目

NetCore WebSocket即时通讯示例

当初创建ionic3项目时候遇到不少问题

比如ionic-cli初始化项目失败 切换到默认npmorg源就好了

比如ionic serve失败 打开代理允许FQ就好了

启动后界面是这样式的

NetCore WebSocket即时通讯示例

(2) 创建聊天窗口dialog 具体布局实现 模块加载略过直接进入websocket实现

在这之前别忘了启动web项目 否则会出现这样情况 链接不到服务

NetCore WebSocket即时通讯示例

(3)dialog.ts具体实现

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43
export class Dialog {

private ws: any;

private msgArr: Array<any>;

constructor(private httpService: HttpService) {

this.msgArr = [];

}

ionViewDidEnter() {

if (!this.ws) {

this.ws = new WebSocket("ws://localhost:56892?sid=222");

this.ws.onopen = () => {

console.log('open');

};

this.ws.onmessage = (event) => {

console.log('new message: ' + event.data);

var msgObj = JSON.parse(event.data);

this.msgArr.push(msgObj);;

};

this.ws.onerror = () => {

console.log('error occurred!');

};

this.ws.onclose = (event) => {

console.log('close code=' + event.code);

};

}

}

sendMsg(msg) {//msg为我要发送的内容 比如"hello world"

var msgObj = {

SenderID: "222",

ReceiverID: "111",

MessageType: "text",

Content: msg

};

this.ws.send(JSON.stringify(msgObj));

}

ws://localhost:56892?sid=222 这是websocke服务链接地址
sid表示着我这个端的WebSocke唯一标识 找到这个key就可以找到我这个用户端了

6.在web端也实现一个会话窗口

?

1

2

3

4

5

6

7

8

9
<div class="container" style="width:90%;margin:0px auto;border:1px solid steelblue;">

<div class="msg">

<div id="msgs" style="height:200px;"></div>

</div>

<div style="display:block;width:100%">

<input type="text" style="max-width:unset;width:100%;max-width:100%" id="MessageField" placeholder="type message and press enter" />

</div>

</div>

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47
<script>

$(function () {

$('.navbar-default').addClass('on');

var userName = '@Model';

var protocol = location.protocol === "https:" ? "wss:" : "ws:";

var wsUri = protocol + "//" + window.location.host + "?sid=111";

var socket = new WebSocket(wsUri);

socket.onopen = e => {

console.log("socket opened", e);

};

socket.onclose = function (e) {

console.log("socket closed", e);

};

socket.onmessage = function (e) {

console.log(e);

var msgObj = JSON.parse(e.data);

$('#msgs').append(msgObj.Content + '<br />');

};

socket.onerror = function (e) {

console.error(e.data);

};

$('#MessageField').keypress(function (e) {

if (e.which != 13) {

return;

}

e.preventDefault();

var message = $('#MessageField').val();

var msgObj = {

SenderID:"111",

ReceiverID:"222",

MessageType: "text",

Content: message

};

socket.send(JSON.stringify(msgObj));

$('#MessageField').val('');

});

});

</script>

基本开发完成 接下来看看效果

7.web和webapp端对话

NetCore WebSocket即时通讯示例

NetCore WebSocket即时通讯示例

8.webapp发送 web接收

NetCore WebSocket即时通讯示例

NetCore WebSocket即时通讯示例

9.目前就实现了这么多 因为项目还涉及其它技术 暂时不开放源码了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持快网idc。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

快网idc优惠网 建站教程 NetCore WebSocket即时通讯示例 https://www.kuaiidc.com/99465.html

相关文章

发表评论
暂无评论