|
编写客户端代码 1.新建一个*.html文件。 ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());, z# h$ f, G% ~) c
这个地方的IP和端口号对应着我们搭建在IIS上的WebSocket服务器- <!DOCTYPE html>
0 p" W/ a6 y" O0 X+ t7 D/ X - <html xmlns="http://www.w3.org/1999/xhtml">9 e1 z4 ^' Q* U# Q- V g
- <head>) F4 h% J2 ~( e; c4 A k
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>4 r+ ]+ _' ^! e, W0 y
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
0 [, x. @4 S& \- Q* ?+ _6 o - <title></title>
5 m) m' \+ ?5 {$ F5 V+ x - <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>8 i! s- t( I. p+ y1 [
- <script>
0 P% p. }* b; g( U - var ws;
- }/ e& t. m2 ?( _% H - $().ready(function () {
4 H! M9 a0 E6 g - $('#conn').click(function () {
" i' M2 a. l( i+ d! t4 Q( f3 y - //ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());. e @) A# h2 m* V" z
- ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
4 b$ a+ h: X' m - //var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
m& E( M: Q8 b3 h; K. M7 g - //var host = "ws://192.168.85.128:8085/api/WSChat";
1 M$ H0 a' n5 c3 B - //webSocket = new WebSocket(host);
) J/ |) ]- K) z# M9 [6 ]) R& Y7 r -
) B' Y$ a$ e$ M8 b5 i% g - $('#msg').append('<p>正在连接</p>');
& W3 [) \4 ]5 H
5 ^4 C9 W# d A l5 W+ F' V. s5 A- ws.onopen = function () {$ O' `5 L: O7 X
- $('#msg').append('<p>已经连接</p>');& j, S% F/ [; I. \% U( r
- }
) a' r9 u7 p0 [) W* d - ws.onmessage = function (evt) {
r5 V0 g/ k6 Z& d }8 ]. [ - $('#msg').append('<p>' + evt.data + '</p>');5 j) [# q$ B' {. k1 q) y( F
- }
- O* U& {1 o# \( [+ @. E) |9 Q0 Y5 I - ws.onerror = function (evt) {
5 {4 \6 L3 @" L! @/ W - $('#msg').append('<p>' + JSON.stringify(evt) + '</p>');4 U3 [% u- R% z; y" @7 C& t
- }" F) v# s! }! W2 s
- ws.onclose = function () {
$ Z, L' s+ D' c3 _ - $('#msg').append('<p>已经关闭</p>'); P5 e/ R% f# Z. T; X W
- }3 t- N8 K C7 C% G3 ]7 P
- });7 E1 O" ]- `9 `+ e$ g+ @/ {2 I. c
- # ^$ X! y$ a% M% i4 M, g W
- $('#close').click(function () {
6 A% x: y6 y s) V4 L - ws.close();
4 y2 @" R) Q1 v- K8 `! s% s - });. S- j% M- K* A
8 @; V& v( E1 j# g0 B2 g8 C- $('#send').click(function () {* m8 \8 f1 t& [9 M! L
- if (ws.readyState == WebSocket.OPEN) {
0 Y2 m$ G0 n0 A0 t. d3 l, t( u6 t - ws.send($("#to").val() + "|" + $('#content').val());
0 S2 J8 J' b1 F% x3 r) w# P - }
0 b1 e$ {& }. C. h* K7 L6 { - else {
B$ |4 W* K* J - $('#tips').text('连接已经关闭');: F* {/ K3 `8 o/ X/ Y# [8 A, v
- }" h; t9 m% t" }# x
- });
: m& r% l: W) ~" B V; H - $ O, a& X8 F# D1 D9 c6 `
- });
- S1 `4 t5 H8 y$ J2 \* g- Y - </script>9 x' E: y$ Z2 R* C
- </head>
5 [: Q1 F" }: V* _/ B5 Z6 R+ P7 H - <body>( l9 [, Q5 s% }
- <div>
9 M& |% T9 A/ Z4 X* A3 \7 j& `4 Z/ [ - <input id="user" type="text" />% X# b8 N2 s5 U3 W
- <input id="conn" type="button" value="连接" />& H) F/ S4 Y% f8 D
- <input id="close" type="button" value="关闭"/><br />
% ^! R8 `: e1 r) Z. ^ | - <span id="tips"></span>
, w1 P4 k7 i J: P% {2 ~0 v2 J - <input id="content" type="text" />8 e# R# `* x, L% e3 s8 h5 F/ K
- <input id="send" type="button" value="发送"/><br />; H; f, C: W2 g6 s$ ?
- <input id="to" type="text" />目的用户; _& K- P4 i8 C4 D
- <div id="msg">+ z( \2 ^, ?9 C# d! {* p
- </div>
7 I. l. R' j! Y8 @- r - </div>
; v( C) B5 p$ R" B' n0 t; c - </body>
4 N& f8 I) l: o6 d - </html>
复制代码2.客户端A和客户端B通信效果 在浏览器中分别打开两个窗口,左边为客户端A,右边为客户端B,点击“连接”按钮,AB客户端分别与服务器建立连接 填写要发送的内容,即可看到A和B互相发送的信息了,即实现了AB客户端实现了WebSocket即时通信。
' P7 q7 Q8 S+ r8 r) V4 A+ Y4 y7 n |