在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>4 n! }; V% Q( H( p
<html xmlns="http://www.w3.org/1999/xhtml">% V$ r% P3 t' c4 F4 r$ N$ R
<head>5 v& Z+ o+ Q3 @0 s* |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>6 t* m* Q0 N8 `( l; G7 Y$ T* E
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
i. ?1 B" Q' s, K Y
<title></title>4 v! L& v8 S; F3 E* P
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>0 ]+ s* @* U1 Y) R9 _
<script>
! a# I5 }% H- p5 g7 ~2 b
var ws;
6 ~5 k) l2 b- B9 T8 R
$().ready(function () {6 K, m+ O7 P$ K7 h0 {
$('#conn').click(function () {5 U4 F6 K: D {4 R" n/ ~
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
+ f/ m* ^. ]7 W/ ^5 H5 F( m3 C
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
6 r+ p- F, w0 `8 i* b- I% L6 n: r
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();/ w: j. a* p4 N- Z& u3 A7 L
//var host = "ws://192.168.85.128:8085/api/WSChat";
+ B: c% `& y1 V6 g% d
//webSocket = new WebSocket(host);6 }) K; N+ t* e+ b% ^4 J
6 F7 m$ h2 n7 p* O- `
$('#msg').append('<p>正在连接</p>');
5 p& K" W6 B# f `: h1 K2 k
" z$ w" Q' ^% [( q3 @: y9 ^0 s
ws.onopen = function () {
9 Z7 W4 y) t/ ~
$('#msg').append('<p>已经连接</p>');) |8 D. U/ X5 T& F* d+ F
}! w1 w1 J" ?) K' j8 \# v" H
ws.onmessage = function (evt) {2 X/ k' j4 U/ s" @: D* t a% P
$('#msg').append('<p>' + evt.data + '</p>');
& h; E5 y% ?- M; E+ k: u& G9 k* x
}7 Y. ~: b( A& }: A2 |
ws.onerror = function (evt) {
& L, x; O, o2 t) n0 I. U
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');3 V# w8 K6 U$ V, Z* v/ f% k. R2 i* Q8 _
}, e( b0 k( A& F+ A! N5 T, Z2 ~3 N
ws.onclose = function () {
; {) t7 A* m) A* a ^/ v
$('#msg').append('<p>已经关闭</p>');
% p, j* g4 q p
}, g* F" X, ^' _1 ~$ _. s
}); X; Y/ H3 ^+ s! P7 i& i+ f5 z
# O2 k% R$ K; i3 T% `
$('#close').click(function () {
7 }2 t( L/ I* g3 ~' {/ V
ws.close();
) ~9 r" c a; W5 B, D# H1 w
});. {: {+ H0 u3 n% w& C
( Y3 W( y# o0 l
$('#send').click(function () {
3 W7 t `: h; p4 R6 N4 C
if (ws.readyState == WebSocket.OPEN) {
; O+ x F( t2 s
ws.send($("#to").val() + "|" + $('#content').val());
! S- w* o p5 q/ X
}9 l3 q9 t- F1 h- E0 @# r
else {5 a: `9 W5 d/ p$ {
$('#tips').text('连接已经关闭');9 \1 l3 O8 {7 Y- b6 O
}7 g. Q2 C$ y' p& ]- E' m
});
/ w8 |1 p4 F1 G2 p3 V/ ?* ]
" b% B, m& e& B+ P: @/ R: y
});
# ?8 I0 s; H3 U
</script>
% K3 E! K5 o4 N) h
</head>
+ _$ |$ ?# M9 _, ]
<body>* u8 r$ P2 G9 P6 h. D) S/ D% R
<div>0 S$ i2 J) D+ J7 Z$ m% f
<input id="user" type="text" />
8 B9 K) p. x9 X. D3 u8 R
<input id="conn" type="button" value="连接" />; y, Q2 B7 ^& P- S; T" e; r- n
<input id="close" type="button" value="关闭"/><br />+ k2 r& H* g9 ]; F7 U& h8 f4 _
<span id="tips"></span>
) \, j( {; t7 Z; y& J- B2 Q$ q
<input id="content" type="text" />7 U& P$ E4 N! _1 K8 h0 _
<input id="send" type="button" value="发送"/><br /> _. w$ k. \: S, W9 r0 {
<input id="to" type="text" />目的用户 @6 p- a8 c* s" X8 Q
<div id="msg">
* [9 n( t* I" J% e; W
</div>; i0 v) p# z9 z% F( I9 m8 K- e
</div>' z, b7 q) v _, c) u
</body>
( F+ u" ?7 r: j, B. v7 w8 h- {
</html>

复制代码

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

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

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

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

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