在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>
" O/ d( o) H2 A4 a" |+ m9 m
<html xmlns="http://www.w3.org/1999/xhtml">
# n2 y8 i" D3 K
<head>
5 @& ]/ X8 C9 u" W6 b! x4 O
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
$ [% ^2 o; z; |2 i
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
' k. \6 r: H0 v2 i0 r- k( G/ n
<title></title>
7 M+ |3 k: Z) @3 }2 H/ Y- e
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
% v) b. m- ^8 E8 w* E9 y6 G% h
<script>1 a+ R( O, D* l7 i
var ws;% T" K2 c0 ]. S6 P4 K5 [
$().ready(function () {
/ h- I7 _2 \. d
$('#conn').click(function () {; Q) g3 ]# V$ \. n4 j" l8 X/ g
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());4 o! x0 A1 p9 a4 A% p& G5 K2 F5 \
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
5 W% A1 h6 T- i
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();4 I, D0 V0 ^: [. A m
//var host = "ws://192.168.85.128:8085/api/WSChat";
0 i0 X% f8 a: K% q _" o* z
//webSocket = new WebSocket(host);1 q) x/ l% }* T' K3 P( f5 c
U% E' {8 {' r" J6 a* V5 @
$('#msg').append('<p>正在连接</p>');$ ^+ k) v! w( n
0 \% Q! K' ?0 R p+ }, ]. L6 A" U
ws.onopen = function () {
/ F1 D- }+ {' {
$('#msg').append('<p>已经连接</p>');; i- z' J! d. n) v; ]/ k" Z3 ^6 O
}
) P' ^, J, S5 F. o8 r
ws.onmessage = function (evt) {
2 {9 v* b* b5 S: q" L# d
$('#msg').append('<p>' + evt.data + '</p>');
! T* E$ U! S9 K4 v2 r+ |8 m! V
}
; e# p3 ^) M ^/ e8 \
ws.onerror = function (evt) {8 c: h* L- F' W6 Y- u
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');1 I/ r. Q8 |9 a0 ^
}
Z f D+ ^$ I* N8 b- T0 k
ws.onclose = function () {6 d/ g0 f N) n
$('#msg').append('<p>已经关闭</p>');$ e0 [7 r! a% _( s8 n3 m
}# }1 _' g$ T/ G& v
});6 v9 |/ h' [+ P( C2 n4 j5 ? G$ u
% ?/ ]% d! B* B) K/ c" `$ k9 Y
$('#close').click(function () {3 ^& e, g& R" J
ws.close();/ R4 G% [9 T2 \- C; r3 z7 T: h
});
+ Z$ b8 x$ u; M7 C7 E% o
6 [% V& j' P* F# K( h( z
$('#send').click(function () {
6 a" X: R# n* q: F" k+ c
if (ws.readyState == WebSocket.OPEN) {! k1 R& s7 v" |) h; N
ws.send($("#to").val() + "|" + $('#content').val());0 j0 f) l0 Z l Z$ l. @
}
; y/ ~3 }. w* h: T# z% K1 U
else {
# y' I3 T$ o$ L- H% |
$('#tips').text('连接已经关闭');5 g& f" V2 y c. C- e' d
}& x( g! o. x `: d" e7 r
});
. a6 o3 J b$ o% ~& j
% w# U7 e! O7 ~
});
* p% ?; r# u) H. K8 B
</script>
/ {8 a- O1 D. `/ m6 i
</head>/ J* ?* D% D! I4 m! V
<body>4 W& A' [9 X, F0 Q: K
<div>3 T' Y& f: G4 J* s
<input id="user" type="text" />$ g8 b0 v: h, p' p/ ?- N
<input id="conn" type="button" value="连接" /> ?4 x7 L6 n3 J; r
<input id="close" type="button" value="关闭"/><br />% v8 ]0 t( x/ K
<span id="tips"></span>1 `3 o% }( |8 G% H0 D1 e- g
<input id="content" type="text" />
* I- K+ x/ ]0 z1 R3 I. H* {
<input id="send" type="button" value="发送"/><br />
+ [" N9 c+ H& V9 Q) U& J [8 u4 @
<input id="to" type="text" />目的用户, p; o! N; w4 ^3 ~
<div id="msg">
( d7 q- ^# J; U; K0 c' l
</div>( B- `, Y; _+ N0 K; E X' |# T
</div># v# l. N6 R" L+ J5 H3 W: O
</body>
</html>

复制代码

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

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

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

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

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

浏览过的版块