在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>
: Z: d# B2 d1 C( p% ^
<html xmlns="http://www.w3.org/1999/xhtml">
1 C: @, X% G) H# e. W" x. c
<head># ?) ~" e, O0 `' }' g2 z1 N
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
$ p# o: i, j4 B! S# e4 r
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>" I" u3 Z; e1 Y1 U* S @
<title></title>9 N+ P5 N# W- B& g4 V5 e
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
$ H$ f) [! k8 H8 M8 U" g: y+ u
<script>0 L1 j) j( ~. n4 ^( ?7 w2 _ E
var ws;( x- ^* [. |. \) f$ \: a5 q
$().ready(function () {
! M0 U" `/ d$ g0 S0 x' e2 k
$('#conn').click(function () { Q+ g8 _6 I$ }, _! @! c$ ?2 e4 V
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
! |9 I! N" x; d0 I
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
( w1 ]! {5 T; t0 |
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();# c4 ~0 a* }- u
//var host = "ws://192.168.85.128:8085/api/WSChat";
7 V. O! x" ~, { i% h
//webSocket = new WebSocket(host);0 T7 A9 T1 W, X2 t/ @9 j) B9 z
) T% R' _$ k) {. N. x& Q
$('#msg').append('<p>正在连接</p>');
# v; {" q2 ?1 H& I1 L6 A9 O! F
4 \# P. z; M5 @, O
ws.onopen = function () {
; J! J; I/ R' F* ~" ]& I( O" h3 E
$('#msg').append('<p>已经连接</p>');& T' O; {6 T: ^0 a9 O
}
6 b% U6 ]$ L1 g+ Y
ws.onmessage = function (evt) {
9 S. X, g5 N4 f' N: {
$('#msg').append('<p>' + evt.data + '</p>');
6 A' L$ a. v: b$ b
}
9 G9 I. o4 K8 F' s) r* \( T( W3 {
ws.onerror = function (evt) {
$ F7 [* L0 U1 F" ?1 o9 S
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');8 s# u- w z9 z# r; u3 W
}5 ~5 d% e. Z/ r. ]7 g# F" ]" U
ws.onclose = function () {* ~1 P: v4 u H: j: R1 ~) Q) Q! ?
$('#msg').append('<p>已经关闭</p>');
0 h1 B4 a6 [* O. `8 c v* w$ h
}3 i2 W! r: z; r6 ~$ R% z8 r" w9 X
});: F2 i$ \+ J0 h" I0 B. v; `; U
0 W9 p9 n. i: g9 o
$('#close').click(function () {1 K, v; o* ]3 B
ws.close();
# W- U. v& U; |; p5 I
});
6 l! t& S* d( i2 M& R4 h3 o7 S
+ Z+ s8 H* [7 s4 L! Y) U
$('#send').click(function () {
0 m/ U+ l, j4 ?) R9 v3 w
if (ws.readyState == WebSocket.OPEN) {
: M' M6 ~" F; L7 g
ws.send($("#to").val() + "|" + $('#content').val());
4 r1 R5 F3 u4 a0 J" a; i# _" ?( I9 }
}( f+ S! m- x4 v) _2 R7 @+ g
else {
+ g) s' E& M2 q7 H; O( d
$('#tips').text('连接已经关闭');
% s0 f" d' ^: D, @0 K
}
4 c' X. J9 D7 t6 e* y! W
});' q4 a9 q9 f: l2 R1 ~' t" f
' _% p) I5 C/ _2 ~8 K
});
6 H( G8 b( U, s* p$ ^ ^+ L0 v
</script>
: p6 }4 e) {% X O' |* b/ S
</head>
5 g& F0 f1 }, ~7 v3 K% o
<body>! F% N* i( a3 L h9 {0 M
<div>
0 s$ U, h' ?" i4 R0 _$ n; ~6 h4 d+ n( P
<input id="user" type="text" />$ B9 g$ \9 Q4 p( h9 P
<input id="conn" type="button" value="连接" />
; d$ l! f) n+ n/ d9 l
<input id="close" type="button" value="关闭"/><br />& W/ q4 S/ b3 b) {* ]7 h) I0 }# @
<span id="tips"></span>
% g! ~/ S0 Y# a% w
<input id="content" type="text" />
8 a% x: _4 e/ N
<input id="send" type="button" value="发送"/><br />" j/ s6 x7 h! h. n
<input id="to" type="text" />目的用户5 a7 ]3 z( [, t( a2 n3 h
<div id="msg">( g7 b, y7 g' K8 }+ C) s" z5 T! S
</div>& y5 U) H K9 Z/ E# z, z6 l! H
</div>4 _# P& k/ m, d) U/ h2 y- B
</body>, ]% z8 B+ J3 p4 C! M# @
</html>

复制代码

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

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

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

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

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

浏览过的版块