在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>( ], N3 r+ a7 V5 u
<html xmlns="http://www.w3.org/1999/xhtml">1 y3 I! l! o( h, ]- b
<head>8 j6 ~8 n' w. L4 U$ S3 T9 g
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>' D, u. B ^# S5 u) ]2 f# h
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>% @- Y) w- q8 Q- b0 v
<title></title>( q+ e1 x% V, D
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
$ U2 n# j0 X/ C' @
<script>
" z+ a1 ], s/ p1 @; J
var ws;3 \7 c% S) h7 o& k% g) x
$().ready(function () {
7 R' v6 U% V+ r" Q: k5 M/ L/ E
$('#conn').click(function () {) t% P) f8 I- y$ C+ v
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
) ~; v7 \# o' C$ x2 q
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());: Z6 l# k! C# B7 _7 P$ L% e: h
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
+ u6 i& @% ^# R/ v( z" v3 g0 C
//var host = "ws://192.168.85.128:8085/api/WSChat";( Q1 y3 X& i% h; W: g2 h
//webSocket = new WebSocket(host);
, e |; E3 b- }% h# C
. R) M' E1 N* t+ h7 k: `- V
$('#msg').append('<p>正在连接</p>');( @" ^6 V G4 ^% B7 Y4 k$ q+ l
ws.onopen = function () {- h. q; l0 Y! h" f0 u
$('#msg').append('<p>已经连接</p>');
! Y$ [- `1 V' N4 C+ J! e/ ~
}
7 M# n6 E7 ^- y/ `0 @$ {2 ~. r. P
ws.onmessage = function (evt) {
) L& O1 w7 a4 Z& n) C1 D- R9 \
$('#msg').append('<p>' + evt.data + '</p>');
/ U' k* p5 G# {1 Y9 X1 D
}
7 S( C4 i" R# V9 D |% t
ws.onerror = function (evt) {/ H! w* {( r' f* ^( `! X. J
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
/ |3 u. E& I$ X' u5 K
}
/ g$ | z0 B/ s* S- l, B! L( C: a
ws.onclose = function () {/ Y9 u3 |2 {8 t$ F
$('#msg').append('<p>已经关闭</p>');+ f% p8 ~& G/ f+ W' k. i+ |) ~
}
5 Q% U7 _6 S/ X& x7 E. c. s
});4 S( G6 E# [! g- ]! M, k" d
, }& d, G* ?- b
$('#close').click(function () {0 ~: `: _+ r' b: T
ws.close();
4 S' L4 _; b% v0 N) ^
});
u) m4 p' \" K+ S% b, X) Z
& \/ N8 @( i7 p! U7 p
$('#send').click(function () {7 b2 R \# h+ |3 D
if (ws.readyState == WebSocket.OPEN) {* L8 o6 U1 [1 S$ x
ws.send($("#to").val() + "|" + $('#content').val());$ n c" a9 v1 G$ W( W* R7 A# L
}
5 Z" V/ I* s4 z, `7 D7 p
else {9 A+ }; {" R9 g1 P5 D+ h
$('#tips').text('连接已经关闭');1 Q8 P* Q6 I- I) a- c' d
}, K- @, ]* E: ?5 c, r
});
8 E+ K7 d; h( T& y6 _ ]
2 ~2 C0 ]/ _" W: c
});
) I, V# J% b+ B' t% Q, p4 g
</script>5 r5 e9 z$ G: e. N( R$ I& M
</head>
7 @7 d+ G3 h1 A' ?
<body>8 ]! u$ W6 a9 @: C% i; l
<div>8 z2 c( y* v5 [* b
<input id="user" type="text" />
8 S" S5 T% R5 n
<input id="conn" type="button" value="连接" />
: B" K3 a5 [) i. l5 b, N
<input id="close" type="button" value="关闭"/><br />
& h7 b5 s3 a1 \. G+ F
<span id="tips"></span>: o& P/ D% I: e1 [
<input id="content" type="text" />; K6 P! z! L0 ^& M# T) f1 `
<input id="send" type="button" value="发送"/><br />
! B2 B, c. G. R7 l- K+ W$ h8 E
<input id="to" type="text" />目的用户2 w. H! w4 X, L" G& p
<div id="msg">6 V7 a! c; z+ T5 A
</div>4 Z, f& p& A% G6 x; V
</div>3 C# N" G3 |0 X. |: U
</body>. _1 S5 B1 b5 R( F" g) l" R: \
</html>

复制代码

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

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

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

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

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