在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>" Q5 s* g" t( Q" v) n" g, n5 v
<html xmlns="http://www.w3.org/1999/xhtml">, D" S! s% `- d# J- `
<head>
2 b |6 A, r4 e, E+ C
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
# d7 m+ ~/ J+ z1 v
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
- h9 V& z. i! }2 V! F
<title></title>) p; O' V! N- Q9 i; Z
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
$ H8 {/ G) c& J' z* L1 ?
<script>
$ z0 [) x A- h( d
var ws;
, T* y, U4 l( ~
$().ready(function () {2 i) X( }% I. R. F3 m( R
$('#conn').click(function () {
- \# R( K; P6 G/ y
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());2 n+ r2 n; ?. H' y
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());: z Y) g, v. R" J( X; L
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
/ X9 n' r7 h& ]$ Y
//var host = "ws://192.168.85.128:8085/api/WSChat";
# d3 J; X }2 [) t2 {+ m$ S! Y
//webSocket = new WebSocket(host);* O( P( Q6 `* Q$ S# i" b
- G* M1 f& w" D9 n s; z8 J
$('#msg').append('<p>正在连接</p>');. |, |7 F: m" N: I& h
' C& y' y) g( L- I4 ?) H$ |0 e
ws.onopen = function () {
$ v" t5 v3 N1 ~ T2 q$ M
$('#msg').append('<p>已经连接</p>');
7 @& ]: Z' L$ \ e3 \9 J5 I5 R
}
$ s- @+ w: t* ^0 k1 \
ws.onmessage = function (evt) {
- K$ h+ V/ d% H6 i" M' Q
$('#msg').append('<p>' + evt.data + '</p>');& X0 B5 {$ R2 P6 l1 y
}
& Q6 P+ p# [" [/ u8 C2 Y
ws.onerror = function (evt) {
# |/ A0 I' @1 i& B7 a0 i- y
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');2 t5 e J7 h# \( D k
}
' q8 U5 g" a1 \4 P0 k
ws.onclose = function () {3 ^ m1 m7 L4 o/ ^" X( W! n2 D) c
$('#msg').append('<p>已经关闭</p>');8 M8 \! Y9 j- x. b
}* I7 y2 j, M/ p( m1 n0 I7 ?. c
});
0 m$ r, X6 ?) v2 K* T
/ Y5 n2 ?0 h4 p5 G5 M- {
$('#close').click(function () {( `8 h6 Z. Z4 D- A6 `
ws.close();
$ n( p& B# L: d: y6 m6 B& D
});
. F* f8 o2 I, i' \: ?( r2 z, y
; h9 N! x1 G! q$ `. G! f, B
$('#send').click(function () {
6 u; n. H# |6 {6 l" P! p
if (ws.readyState == WebSocket.OPEN) {2 r7 y3 {# h! o; P, D4 r/ U0 X
ws.send($("#to").val() + "|" + $('#content').val());" J4 _0 P9 i2 `( R5 n- ?
}% X! J# B2 j. K# r" |( r
else {; I8 p8 p( |7 y- m( O9 R4 |
$('#tips').text('连接已经关闭');
1 a, j% I, f6 U( ^) t. J
}
" T' K2 P$ w, m6 ~& b# ?# @# m
});! [" o; C) Q+ C. K- Y, w
# W2 W/ Z1 @+ {9 H5 {2 A; @( r" Q
});
$ w; E/ c( ]) K6 E+ u8 }( r) J0 z, A7 j
</script>8 \) q+ M" Y0 C1 R7 `
</head>" v- Z9 ~+ X7 _4 e- d; R4 w6 c$ Y
<body>
7 y2 w A) D2 q" B8 O
<div>) J2 \* u; d! P6 [) j4 u: F
<input id="user" type="text" />( A! Z* N) j( O" `. _' [6 I
<input id="conn" type="button" value="连接" />
: |3 h. N- c [1 E" I
<input id="close" type="button" value="关闭"/><br />9 F$ B$ g+ L5 D
<span id="tips"></span>
# n# Z$ j5 C$ e$ D
<input id="content" type="text" /># l" A8 D& R0 L; b/ |$ s" s
<input id="send" type="button" value="发送"/><br />3 }5 m9 n: L- z4 S0 y4 p
<input id="to" type="text" />目的用户
1 N. C; i/ @' u- t
<div id="msg">
/ n! z/ }" j$ w) C$ _; F
</div>
& |5 \& h- c$ d6 ~9 r+ _
</div>. [ S3 p- C( s/ w8 R8 N$ k1 a$ X6 v
</body>
3 F! p# t4 L7 \4 y X, t5 _5 z
</html>

复制代码

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

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

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

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

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