在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>" r8 I' ~( M/ P: A
<html xmlns="http://www.w3.org/1999/xhtml">
$ N2 p2 T3 R4 m4 a
<head>' ?; z% r1 f3 w/ _
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
1 }+ p. r. P+ H5 X" E9 C. |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
+ J8 r7 S2 p) J3 @4 K+ R. t
<title></title>- |; r# p8 y- l4 X
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>! w. \9 I8 ]4 @5 f
<script>" \" h: w6 J; f
var ws;
& A# `# Q0 `9 H' l; u# q
$().ready(function () {( H0 f* ]! u& T: B( y- n
$('#conn').click(function () {! ?& A( T/ {1 q8 w
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
/ x5 p! ^/ j& j7 [
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());# `, f0 `0 d7 h! ?8 _% ?. k
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();) u# l) c+ `1 k( }
//var host = "ws://192.168.85.128:8085/api/WSChat";
% H8 ~. h/ k* H/ ^
//webSocket = new WebSocket(host);4 |3 n# K8 O! K% T
& n! s }3 k1 ^- ^
$('#msg').append('<p>正在连接</p>');
+ \0 L3 X6 W8 P& z3 N" q
5 W) P) R8 C8 Q- O0 v R+ |
ws.onopen = function () {
; Q$ l; r7 E2 P) P3 \) ~ @
$('#msg').append('<p>已经连接</p>');# v) [3 k( j/ ?; U
}
( x. q# j- }/ {; _6 s. g
ws.onmessage = function (evt) {- z) c( @! e& l. E( P
$('#msg').append('<p>' + evt.data + '</p>');
5 W! _0 u- x. w6 }' m# E$ S
}
( {; ^+ M5 v0 W
ws.onerror = function (evt) {+ _0 K$ q8 N& |9 o6 L# X
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
$ Y0 U6 |$ H" |! B0 U, _9 U: Z4 _! U
}
' B" a; r \4 E/ J
ws.onclose = function () {- F% q1 T- f7 ~
$('#msg').append('<p>已经关闭</p>');
4 n! T' g8 a+ F3 i
}
1 y% ^0 h9 I1 V8 d1 W( ]: @0 m
});
+ K. K* G5 _, m" h
* Z( n. N% W1 ?% z/ r" e- X
$('#close').click(function () {5 F! g2 Y# h8 K0 T# `% ]% S9 x
ws.close();2 m, Z9 N* v6 [% `3 [6 g. ~
});2 l5 T4 j3 g: j5 V2 ^1 H2 j- |
# }5 V9 J( i9 ]2 L( n5 e
$('#send').click(function () {, B) L% Z( l# [5 E4 S
if (ws.readyState == WebSocket.OPEN) {
! B* v3 ~9 n1 j! ?1 b( f3 J- [, Y
ws.send($("#to").val() + "|" + $('#content').val());
2 Q* j4 \/ ~ x
}( Z9 x' X3 @/ i, A. G
else {% g D2 b% N: W" i
$('#tips').text('连接已经关闭');! e& s+ e/ c! Q0 l/ b- f U
}. ]- ]* O& R( s, p6 W# J
});
' j `) l, E3 c9 U1 N2 T
4 G v/ m2 V- {+ g$ i. i% n
});( X; O( S" c3 T7 D9 g7 {
</script>
1 }( u4 ~9 O4 M G/ S5 T! o7 X% t
</head># P8 E" ~% l+ P9 w. p" l$ j! _
<body>$ [7 m W1 a& }6 H+ Q
<div>
7 U6 S3 t" z& d/ R2 w
<input id="user" type="text" />5 {& t0 e6 Y& B3 X5 E6 P
<input id="conn" type="button" value="连接" /># {9 q; U8 {) c0 s
<input id="close" type="button" value="关闭"/><br />6 f! g" t! C! Y
<span id="tips"></span>. w% H1 a; D% H8 t0 m
<input id="content" type="text" />4 j3 K5 m+ Y+ ~3 |; E9 \- u
<input id="send" type="button" value="发送"/><br />3 h3 s! Q; H% Q. W& U* p8 h
<input id="to" type="text" />目的用户
) |0 Z; |5 C8 D5 [
<div id="msg">! ]' L' e' O! A0 Y
</div>
7 w% i+ n3 p; R8 r9 Z. c% H; [; h
</div>
% R" \& G o- _1 |! b
</body>% J, p2 D \9 x( y7 V
</html>

复制代码

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

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

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

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

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

浏览过的版块