在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>3 o P3 F8 W3 i. w
<html xmlns="http://www.w3.org/1999/xhtml">
p4 a8 A. W# i* e4 A: y z2 N% |
<head> D- G% r B- T7 `* N% J/ M
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
# x8 W9 N* g3 Z c3 m5 g7 K
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>4 I( }" z$ i" j/ o6 S& V
<title></title>
2 ]8 [+ B u# H( M4 G4 o" u/ f, {
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>0 R; {% T& H- H! J# N
<script>
: m' p6 w% L7 A- K; ?
var ws;7 x2 \" s, |+ `8 w
$().ready(function () {
& L, X$ w- B2 T+ I5 q. x7 C
$('#conn').click(function () {/ r9 ^, \$ L: V9 Z
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
+ Z2 `: _4 h# B9 M7 c0 C" J, C
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
7 n3 o- [' X4 u" G
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
/ N6 ~: H; m6 E: j
//var host = "ws://192.168.85.128:8085/api/WSChat";. R# \0 Z/ {, _* b7 c
//webSocket = new WebSocket(host);8 ~5 U9 ]+ f3 s, V
6 T9 l& q; \- f/ F
$('#msg').append('<p>正在连接</p>');
% c& X$ x% g' j; s9 F
# ?7 T" I( ^& d" T7 m4 N
ws.onopen = function () {
( b, M/ |3 T. ^6 P4 r4 _; e
$('#msg').append('<p>已经连接</p>');) g% b$ A" b6 q$ J( L+ d
}5 n' C. r& g$ L |' u, g+ O
ws.onmessage = function (evt) {7 Q- S7 @$ Z: o( B8 Y1 Z0 }/ l( P
$('#msg').append('<p>' + evt.data + '</p>');4 G ` `4 h( _+ K. l$ T3 K
}7 Q; @8 K3 L& J
ws.onerror = function (evt) {1 u/ U; ?" e8 ^* Y' u
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');7 p+ u* _8 t* c' G: R
}
, ]- e& n6 f+ q" E) n5 @4 }$ a
ws.onclose = function () {1 z$ K; ?& b: b5 N% N% o$ H6 k
$('#msg').append('<p>已经关闭</p>');3 x1 {$ _8 H3 r% ]
}
3 g& x" P }" k" L6 g: b
});& y: [1 X/ `- K& d, W3 q( p
) M$ b9 L2 s' T4 Y$ M& S6 f
$('#close').click(function () {
, p; k: y0 n* T3 x
ws.close();3 _2 U: l$ k. E. R
});
$ I6 M7 r- G4 Z. y; w
( `! }: g# E0 c( C
$('#send').click(function () {
* p* w* `- |5 B+ s+ R- |5 J
if (ws.readyState == WebSocket.OPEN) {$ a/ e$ B2 I9 [2 P. R
ws.send($("#to").val() + "|" + $('#content').val());, G, ~* _) K# p) G
}
) O# i1 q4 X7 ^ H8 ?* ?+ D
else {
5 |# {+ K& l0 `/ J5 `
$('#tips').text('连接已经关闭');+ x) l; }# |' _ m, |
}
8 Z( x) c6 D, k+ k& O
});
0 z8 K' t l0 P7 H+ _, K* t3 [& p, F
) C+ e9 _3 A, g) T% _7 G
});
9 |: {1 q: ?! W4 E+ }$ G2 y7 ^7 }
</script>: R4 D3 E( b) |
</head>
/ I% F2 b3 [+ I& e
<body>( Q. Z1 r+ e+ ^) E/ Z
<div>
, w$ V( J& h! M7 K
<input id="user" type="text" />5 e8 |; M u0 o
<input id="conn" type="button" value="连接" />
$ V; X6 ^/ W" i% R& F3 L
<input id="close" type="button" value="关闭"/><br />0 j' I" ?7 F9 G2 b$ A9 W+ j; d/ Q
<span id="tips"></span>; R% ?/ P8 P& _4 j- V4 {0 y
<input id="content" type="text" />4 C" ~% L/ R% j( S: C
<input id="send" type="button" value="发送"/><br />) L9 X3 ]/ r( G* m2 r& ]
<input id="to" type="text" />目的用户
5 I2 h* {' [7 ~/ ?) e R
<div id="msg">/ X; P4 V6 _4 l
</div>
. p2 C, c5 {0 ]6 Z1 \
</div>0 f' j" t1 Z1 Z) \9 K& y
</body>
2 u$ U6 W0 j+ G% O! [ H' `$ O' {
</html>

复制代码

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

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

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

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

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