在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>3 H% ?* A) L! `6 R# E
<html xmlns="http://www.w3.org/1999/xhtml">
. \2 W r& H: A- F8 ]- J+ J* k+ U
<head>
* H: g6 v/ S9 f7 U! ^; W5 I
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>( J7 J! f o/ o
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>" e: k% y( j3 c$ H; g# Y7 F
<title></title>
1 D4 x; D0 q8 Y$ ~+ e8 d# Y% u8 T
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>+ R" r8 G5 @2 a+ _# }0 m5 w
<script>1 \# k# {5 o& o# ~/ z! u( p
var ws;
" g* V; |1 J. Q
$().ready(function () {/ A3 t: Q1 `& K6 [, O2 t; F+ h
$('#conn').click(function () { C. Q+ F- h8 @, k4 M
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
5 O7 P- z5 J1 e; P/ b- F
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());, M9 P9 G( I. J5 c
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();+ E8 t' X5 V( g
//var host = "ws://192.168.85.128:8085/api/WSChat";5 Y* @/ Y. C6 T: p2 s C4 W
//webSocket = new WebSocket(host);
( B" s5 f* k( [! _1 i( q0 |
" T, C+ B* H% Q& K" K6 k+ ^* @
$('#msg').append('<p>正在连接</p>');1 q! m' s! `4 W7 l/ z E
: t; y6 j& ` ^. X( M% D5 O9 R
ws.onopen = function () {2 @+ r" B H# R9 K
$('#msg').append('<p>已经连接</p>');, p- z- e/ a5 L: L
}$ @7 N6 O$ n9 L1 P* R% f1 P D/ T+ |
ws.onmessage = function (evt) {( {" `$ U6 U% i* W
$('#msg').append('<p>' + evt.data + '</p>');- t+ s6 \( T: g: I- \4 z: Y
}3 J: }+ f% w) k+ c9 Z0 o. {! o' p
ws.onerror = function (evt) {" }. f# ~' N2 C! z/ i: l
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');- J% _, a+ U1 p0 k( }$ z/ N9 [" X
}" T6 |8 B0 F9 \! I" y
ws.onclose = function () {
( c5 F: `; F5 m: O7 J/ P; h
$('#msg').append('<p>已经关闭</p>');
- ?2 V, \. }/ c2 G! F- }" k: E
}+ n; T# P2 H A. u' n9 b
});2 A. u$ F! S+ X( a& `
. F7 S6 p6 T- e6 {- B
$('#close').click(function () {
" {" y, r9 p& G3 x- l5 `
ws.close();
: m# F, n7 l! O4 o( J4 A
});8 K8 B/ I- N9 u( H& x/ e; y) M$ W
. H# Q* S. O7 }
$('#send').click(function () {
; h# I7 t ]0 P- _- I* X
if (ws.readyState == WebSocket.OPEN) {. T1 @) R. K, h. p
ws.send($("#to").val() + "|" + $('#content').val());
2 o' Y, a; s3 }% W( g4 V% D, E
}
$ Q- H" Z, ^/ a7 g5 h% ?
else {1 {* Q. r8 H/ [& }) T
$('#tips').text('连接已经关闭'); q9 H1 I& ?1 v) Z, H# @1 o- `
}' m. f- d- ]8 Y+ Q$ Y/ k. P' T% g
});) M5 A$ H, \ B7 E. H6 q+ ~
K+ p# n5 h8 X$ t- ^% b- i( y
});
; }* d) J, n1 A0 w; M; p# N) P
</script>" e2 f8 u6 [4 [! p
</head>% v3 x. ]0 B! W, W
<body>9 e* \& O: f3 Z, ^8 A' X/ \- t7 ?
<div>
% W/ ?) Q' H5 j+ Z* p) n1 v
<input id="user" type="text" />
8 |* W0 }/ u2 }
<input id="conn" type="button" value="连接" />
/ N4 B6 `0 i# x
<input id="close" type="button" value="关闭"/><br /># }, ? ^; S, i% j% a
<span id="tips"></span>
t& F6 [( D; q T
<input id="content" type="text" />
4 q& Z1 h5 i3 F- w6 t, m! }
<input id="send" type="button" value="发送"/><br />4 m% x4 B3 j6 ^7 m$ Y0 q) g
<input id="to" type="text" />目的用户
# S& J3 a9 ~) A8 D& q1 i" H
<div id="msg">- _0 _0 ^0 h+ }4 e2 s
</div>% H0 Q7 e" g( Q
</div>
% h9 I K, X/ R8 F
</body>
1 D1 h& o2 T0 f" `+ O
</html>

复制代码

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

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

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

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

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

浏览过的版块