在IIS上搭建WebSocket服务器（三）

admin · 发表于 2018-11-7 00:42:00

编写客户端代码

1.新建一个*.html文件。

ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
这个地方的IP和端口号对应着我们搭建在IIS上的WebSocket服务器

<!DOCTYPE html>
' Y3 @0 f i; W$ ]" g6 }* B I
<html xmlns="http://www.w3.org/1999/xhtml">
9 T- y/ _$ P! w. u
<head>
! d( L& K8 V& a& [6 L2 [1 m/ C
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+ X) O3 _2 i& d, S
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>: ~+ B8 F* e3 m# u* S: h
<title></title>9 p7 ~$ H+ `* a' n7 e" s, V
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>$ U# s' R0 V* s% x3 ?
<script>" B& N I+ ?8 H5 q& s; S
var ws;. V) w) _5 X/ W9 B( E: i: Z
$().ready(function () {& y* W9 s: N, @! U) p
$('#conn').click(function () {/ @& n4 q# d% ], B: h7 g
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());% p) H1 m! C g/ Z( ^, k0 L$ q
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
% v" M0 u( G( y4 \& K
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();, y# b+ I. c- {! R2 \. c6 f5 w
//var host = "ws://192.168.85.128:8085/api/WSChat";
9 J5 |. O9 k3 L
//webSocket = new WebSocket(host);
" o$ j9 e0 f% G$ q: t& ?
/ N+ c$ k7 v4 a# ^
$('#msg').append('<p>正在连接</p>');
- a; `/ e0 S" [1 a. I8 z
- b! m* m, T' F. D: m% ^( x
ws.onopen = function () {% }: `9 i9 U3 p# n& X$ u$ `9 G4 K
$('#msg').append('<p>已经连接</p>');
* N: x% Q/ l5 ]
}! b$ k7 J- r8 G6 w# v
ws.onmessage = function (evt) {0 |+ L2 H& A! |5 [$ U
$('#msg').append('<p>' + evt.data + '</p>');, j/ Y) u& b% C5 n* _
}
# R$ U0 n: _" l% b8 b& }6 ^# R
ws.onerror = function (evt) {
1 [9 b; d; d( A. Y! W
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');* y0 c" C+ l) u7 Z# f8 h
}# M5 @; i A/ ?3 ?
ws.onclose = function () {0 ~' y+ D! n, c+ b( f
$('#msg').append('<p>已经关闭</p>'); Q2 m3 k4 f7 K% E4 i: I
}
3 N3 D" z F2 t% k
});
. g8 d6 K6 D; _6 X
5 y8 ]1 ^8 S+ M( v) ]* c& U* I+ p
$('#close').click(function () {; S% `( t7 x5 C \ J
ws.close();
3 O; U9 y7 H# S1 ]. J% ?
});
7 V0 s# _7 p: g
) s# J6 V5 e" w- B
$('#send').click(function () {
2 M6 @* B7 _$ H% G# q2 B9 ?0 Y R
if (ws.readyState == WebSocket.OPEN) {: s F) `* W1 e5 T6 v
ws.send($("#to").val() + "|" + $('#content').val());7 G5 x( x/ _: [/ Q7 K9 F5 j# L) Q
}
- C0 ]) T' m8 i! }0 D" ]+ f
else {9 E9 j) _" L, ?1 }. c) N* z
$('#tips').text('连接已经关闭');7 _" c1 j3 K' @$ F' K5 }
}
) P1 b5 n8 C# b+ M# s" N; w
});% V2 _/ Q9 n6 T$ X+ r. T8 G
9 W2 f8 ]) I( E3 ]2 Z* D
});
! R3 s' y0 l: L8 h; r5 j- [
</script>
5 g& U6 ^3 z A2 ?2 \
</head>
8 {. b2 o3 F. y. e! @$ {
<body> N; w* r) p; ^7 A
<div>
2 J1 S9 \. o$ D$ M/ _
<input id="user" type="text" />
]! W! ~ T6 x# F# ]( q
<input id="conn" type="button" value="连接" />- ]9 M1 j5 _$ I8 Y
<input id="close" type="button" value="关闭"/><br />
( L: y1 N5 R7 e1 W) } w
<span id="tips"></span>
) O0 x; ?% o2 \* A0 M F3 H
<input id="content" type="text" />
$ F3 F, w# ]) Y; W
<input id="send" type="button" value="发送"/><br />
0 X. }$ ~ {5 @5 G1 J; x# v
<input id="to" type="text" />目的用户0 s" e* U) D, G# n: H/ W1 d- C
<div id="msg">2 P+ S7 T$ }% m% o
</div>
2 d0 }4 w8 v9 m9 K0 Q- w5 ?
</div>* M- B0 |: H2 j/ Q! k2 x7 q% N
</body>
# I# v/ j8 C9 G/ u
</html>

复制代码

2.客户端A和客户端B通信效果

在浏览器中分别打开两个窗口，左边为客户端A，右边为客户端B，点击“连接”按钮，AB客户端分别与服务器建立连接

填写要发送的内容，即可看到A和B互相发送的信息了，即实现了AB客户端实现了WebSocket即时通信。

帐号		自动登录	找回密码
密码			立即注册

[html5] 在IIS上搭建WebSocket服务器（三）