在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 Q' f* Y5 e% L6 G- R6 ~
<html xmlns="http://www.w3.org/1999/xhtml">0 P6 S5 p" Y: L9 B( j
<head>/ a" z8 r$ g& f. x3 _9 ~; t/ k) d
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>% ]4 ~: ^- f! R; _* T! |8 |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
$ h2 C9 l3 f2 Y0 g
<title></title>+ q/ f: C" `& [6 E
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
3 R9 I7 ~* U) v3 l5 f. u V3 p( \
<script>
6 ]( X- @* y$ q0 x) f7 j: [
var ws;; n4 ]% r! @3 q# p8 T/ v( Z4 [* d
$().ready(function () {' U- X& H. q n! L$ B
$('#conn').click(function () {
5 W+ [3 C5 J [. ]( w
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());( E' h8 C; |( q, i1 ~6 d N) g# Y
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());: M5 p; ]* X9 z5 o' k4 q. Y
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
. L+ ], _4 ?2 T9 s- b0 j4 Z8 X
//var host = "ws://192.168.85.128:8085/api/WSChat";1 w# A. H6 O! [& D; n4 ?) d& Q
//webSocket = new WebSocket(host);& H/ G. w" E! \$ R# Z& |
Z. f9 W/ O: d4 y0 V; A
$('#msg').append('<p>正在连接</p>');* ?3 w4 |' `" j, _
* m0 J- ?- L8 I6 \# a! O
ws.onopen = function () {( W" M b7 G" a( o" ^" I% Z. T
$('#msg').append('<p>已经连接</p>');
2 t# d% k# _& ]4 F) h( |) E' o
}
" g, ~+ A$ I2 K; [ ?) E
ws.onmessage = function (evt) {
* b# i+ Q5 m$ C
$('#msg').append('<p>' + evt.data + '</p>');
: `/ w4 J4 Z# E/ @$ |' j0 o# c' E
}
$ e) w3 E/ H! `3 u- ?; G- I3 b
ws.onerror = function (evt) {! m' `1 m7 j) ^( J; }
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
+ C/ q1 f4 I ?0 U
}
5 Y# u& ?5 W: \7 ^; ]4 c1 I
ws.onclose = function () {
$ P- ~- Z3 E4 B: P
$('#msg').append('<p>已经关闭</p>');; X! N1 K% {- B4 d( `
}# T5 r Y7 V/ ^, r* o" `
});
5 [. t$ W4 _2 ~
8 M- p( J/ B e+ L! Y A
$('#close').click(function () {- V& \. {/ f/ P4 a4 c1 X
ws.close();
; u; B/ K! y* B# H/ y
}); g' @) q4 r8 }* M( n
) P: @" @ x. V! `5 m9 R
$('#send').click(function () {
7 F9 k* N6 f4 L3 C2 g$ U
if (ws.readyState == WebSocket.OPEN) {
9 {9 }8 y' l# [4 V8 d# Y K& b
ws.send($("#to").val() + "|" + $('#content').val());
. A, ]% a; q! j) _% c
}- F7 F* U7 }9 d( t: e' k9 h
else {" M& T; r7 p( A+ y) y3 D9 E# ?0 u @
$('#tips').text('连接已经关闭');
+ ^! W% T3 ^2 B, N' \
}
0 n8 ]0 H8 B2 |* N# n0 g) L8 b+ X
});( L3 J# h; d* l# b* _9 L& l
. F0 [# ^; l* j; `; e/ e9 ]
});
4 O) K/ v1 F! W5 h; S+ H8 M
</script>$ m5 D0 A6 M$ B& B5 g
</head>9 u: W( u. l+ w W$ G9 E1 C. L: o
<body>8 R. R5 e" D2 O$ @) a/ O% a
<div>
, z/ w0 M9 n! R5 v! E
<input id="user" type="text" />
1 b% F, B$ a* q7 G( j4 n y
<input id="conn" type="button" value="连接" />5 ?; P" J6 g% W5 F- T R
<input id="close" type="button" value="关闭"/><br />
# c4 r! a v% `1 Y2 N
<span id="tips"></span>
8 t0 p$ b8 x7 T5 J, X
<input id="content" type="text" />
, C" H+ Y: {6 q' w B/ R9 z& K) K
<input id="send" type="button" value="发送"/><br />
4 y, p# Y1 g& N+ ? G" y$ l
<input id="to" type="text" />目的用户' H! w# N4 H/ {$ p/ q! F8 v5 Z
<div id="msg">' x1 k: e7 N) A8 z8 h7 b8 n
</div>
% U/ ^$ r6 X0 o
</div>
; x( W. Z" J& [5 r7 `
</body>/ O& L, J& m! ^1 j; h
</html>

复制代码

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

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

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

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

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

浏览过的版块