在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>2 d8 _4 U r; x7 |
<html xmlns="http://www.w3.org/1999/xhtml">8 T/ @/ t* [6 L( N. S
<head># O) c; S2 r+ J! h. ]' k- G; h' T( V
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>: R1 v/ ~* X9 n- {2 b2 b
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
9 P( a% C* v. z2 q$ y
<title></title>
* s3 u8 ]$ f+ G
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
" H7 i; S7 a& [0 h1 U
<script>
) Z5 C: a! a- D& ]) U9 C/ Q9 q
var ws;% v+ t% L$ v0 {% `% u6 f/ Z9 g
$().ready(function () {9 z% J( Y- t" m: K
$('#conn').click(function () {
9 O. e0 P1 |/ @) h) P
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
Y" L. D6 B: j
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());6 X* b' G% \+ f# m" j
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();8 }2 `# p) O6 F) [& k$ N
//var host = "ws://192.168.85.128:8085/api/WSChat";& T# q3 x/ n# y9 D
//webSocket = new WebSocket(host);
% h$ f8 w# ~) L# V) y, g# w5 R" t
0 |! X u( W6 S
$('#msg').append('<p>正在连接</p>');& g5 N% ~4 a: p+ p
3 L# S# P! R2 j' c( b
ws.onopen = function () {: s$ c9 V2 Z9 ^2 d* ?
$('#msg').append('<p>已经连接</p>');
! C7 @, b9 W9 m( u
}
$ x; s3 m) x6 W( o
ws.onmessage = function (evt) {: i1 |( `" c% }& }$ d3 q
$('#msg').append('<p>' + evt.data + '</p>');
% D# e% H" o$ k F
}
: U' I9 e9 G4 J
ws.onerror = function (evt) {6 F; o8 K+ ~2 f# w
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
4 W: G( a! \" p" [8 T0 h
}0 U% ~. J" y9 R6 S6 @# d7 E( q
ws.onclose = function () {2 H7 ^) V- w- P0 w) _. X
$('#msg').append('<p>已经关闭</p>');
6 a. M% ?6 J# B3 ^
}
( H- {& _) Q3 I
});9 V; U( ?7 u: ~+ N5 s
. w* ]2 x" F! [" n9 W
$('#close').click(function () {
7 K5 F! e; V1 I, u2 V9 n/ _/ x
ws.close();
$ m! V4 U. v/ J/ A" {$ n; T8 x
});
# E# |# H( s6 P
( _. b# \1 V( d1 |
$('#send').click(function () {
& V# C% T9 R( [+ A' p! e' \3 d
if (ws.readyState == WebSocket.OPEN) {
9 i. J3 n6 W9 c% ~7 ~1 w
ws.send($("#to").val() + "|" + $('#content').val());
1 T7 a' J7 C% t7 Q2 d
}6 ^ {- c" y8 U, Y$ ]8 e
else {% u/ g7 s: ~3 ?0 X2 q6 _4 j
$('#tips').text('连接已经关闭');
- J4 X% [7 F u O7 [+ N, e
}1 R0 f4 y, h6 W9 k; z0 {* l6 `+ N9 e5 S
});! Z, @+ Y ?, o( I5 ]
" k0 M' j/ o( v- A* M
});& h- [' R' x3 J( P) W' U' l
</script>
8 l# I$ p4 q: }3 p$ [0 e) {
</head>0 B3 o1 l* p, p) k$ i
<body>5 f! ]% p, R. O) J7 B8 W
<div>
5 `6 B1 }3 v- u, g" c. R
<input id="user" type="text" />) Q- r! ]; z$ }' r$ `3 U2 q
<input id="conn" type="button" value="连接" />
3 s2 P" @& b4 W8 M" f/ i! J
<input id="close" type="button" value="关闭"/><br />
' d# l/ m3 O( h" w# L
<span id="tips"></span>
# H O$ u4 z7 }
<input id="content" type="text" />
4 o8 z% E! ~( k
<input id="send" type="button" value="发送"/><br />4 s; g5 X1 J, X5 P; _1 I. a
<input id="to" type="text" />目的用户
- i& }6 U6 O5 d+ g6 |
<div id="msg">
4 r( C' t( s' Z1 c
</div>
" o- B% s% F( L9 \
</div>
. N# q `: Y" {0 m* t& w
</body>
$ {! F3 \" c g4 ^7 n
</html>

复制代码

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

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

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

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

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