在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>
, d9 P" @/ L) k
<html xmlns="http://www.w3.org/1999/xhtml">+ I. X' W7 i" C3 h6 l/ G/ u! ^
<head>3 }7 C- u% D7 H U
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>( f/ y A# v6 g# _; g
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>1 E2 L# C9 F L! [. K) \
<title></title>" x# h* V* U( W2 Q& J
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>% t; U" v/ M8 r% R7 F# e
<script>
: }& x7 N" h1 V
var ws;
- f1 y- m {& m4 G# u8 }: c
$().ready(function () {
) o+ f4 H0 R* a* j0 w/ N
$('#conn').click(function () {
8 q9 n% A5 {2 x4 V; ~8 L5 b
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());9 Q# K0 b1 T( ?6 G( q
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
' V! W5 r# _& {
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
# z4 K& u: f8 s
//var host = "ws://192.168.85.128:8085/api/WSChat";5 B1 I+ [- R: p
//webSocket = new WebSocket(host);
7 {0 S# s+ N+ N" B' E
v, h5 e4 f8 q$ X
$('#msg').append('<p>正在连接</p>');
' [9 \3 V# J, G4 {
( E7 h* [: j% [- d1 C; j4 a
ws.onopen = function () {' i& \- ?, `/ h J, T' T5 Y2 _
$('#msg').append('<p>已经连接</p>');6 ~/ Y8 s* \+ C5 H4 _2 T) ^3 W
}) I- B% O8 l% B- ^( a
ws.onmessage = function (evt) {
( S+ e+ V w) g: z' W: B/ L# ]* |
$('#msg').append('<p>' + evt.data + '</p>');% l5 i; W+ Q8 [ q O
}/ a0 I4 k* u. Z1 t
ws.onerror = function (evt) {
5 W# [+ J5 f1 @
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
+ g8 I# Q2 A& s) l Q
}9 ?% K3 k0 J# r5 S! Y* L
ws.onclose = function () {' i* j& {2 d+ s4 r) X8 n
$('#msg').append('<p>已经关闭</p>');
7 {/ |; F2 f! ^" R3 g. ~
}
, o; B9 }) x& Y
});% o8 j/ A( n6 f; j- h
6 \6 i- F# C3 N" c5 a# o; K
$('#close').click(function () {
. m- ?$ A; M5 a$ c- L: |; |9 G
ws.close();
7 y. x" K* T: c% \# x' k2 y
});( ^% @/ j" U: M, ?
1 a U! @4 G9 g2 \# P, d
$('#send').click(function () {
) w- ^4 P3 S" r7 H7 D# G
if (ws.readyState == WebSocket.OPEN) {
: W+ o& K- [4 F3 X
ws.send($("#to").val() + "|" + $('#content').val());1 U6 a* ?1 a1 C2 _; X5 v
}6 O6 p0 G6 e8 T5 S0 ?8 z
else {/ O' Y' _6 ?1 p; }: w
$('#tips').text('连接已经关闭');6 K* u1 e+ N: ~/ D( _ L( _
}7 c5 h5 k0 m! P8 R+ a5 W/ o' f
});' l6 c5 y% W7 Z: z
# r- ?' h. ]+ r( T, J
});; m6 Q" S$ v+ o: T: {! O
</script>% T; C6 P3 F& U! {6 s! g# x
</head>
! R0 @% v' P- L4 X. e' d+ k
<body>/ \2 T% U/ ^8 {8 p2 D. K
<div>! h" g0 F1 |4 o, H
<input id="user" type="text" />
; ~. N7 k2 q6 o% }# \1 H
<input id="conn" type="button" value="连接" />( F; _* {3 Y5 a9 E# Y
<input id="close" type="button" value="关闭"/><br />" Y, Y0 R1 a) D# }
<span id="tips"></span>' B' M _7 x1 [3 z, Q7 d+ A
<input id="content" type="text" />
) k; ~* u& q' K+ U- y* B
<input id="send" type="button" value="发送"/><br />0 A* H% `+ }0 q" ` x$ X
<input id="to" type="text" />目的用户
! `, |) w) ]; ~4 q& f' _# N5 y
<div id="msg">
3 F6 o6 A- S; e
</div>% m% x0 z) @) N* C9 v" K
</div>
B+ r" @& N( X
</body>
5 H9 U! u+ j _1 M! a
</html>

复制代码

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

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

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

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

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