NodeJs 实现简单WebSocket即时通讯的示例代码

服务器的实现很简单,先装一个nodeJs的模块,叫nodejs-websocket , 直接在nodeJs命令行中敲入:npm install nodejs-websocket回车就可以安装好了,然后就可以开始建立服务器了,因为有了nodejs-websocket模块,所以很多工作都不用我们自己做,直接调用别人封装好的方法就行了:

服务端代码

根据客户端传来的消息判断哪个是game1,哪个是game2,保存connection对象。

var ws = require("nodejs-websocket");
console.log("开始建立连接...")

var game1 = null,game2 = null , game1Ready = false , game2Ready = false;
var server = ws.createServer(function(conn){
  conn.on("text", function (str) {
    console.log("收到的信息为:"+str)
    if(str==="game1"){
      game1 = conn;
      game1Ready = true;
      conn.sendText("success");
    }
    if(str==="game2"){
      game2 = conn;
      game2Ready = true;
    }

    if(game1Ready&&game2Ready){
      game2.sendText(str);
    }

    conn.sendText(str)
  })
  conn.on("close", function (code, reason) {
    console.log("关闭连接")
  });
  conn.on("error", function (code, reason) {
    console.log("异常关闭")
  });
}).listen(8001)
console.log("WebSocket建立完毕")

【game1代码】:通过点击获取三个框的内容,传到服务器

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .kuang{text-align: center;margin-top:200px;}
    #mess{text-align: center}
    .value{width: 200px;height:200px;border:1px solid;text-align: center;line-height: 200px;display: inline-block;}
  </style>
</head>
<body>
  <div id="mess">正在连接...</div>
  <div class="kuang">
    <div class="value" id="value1">小明小明</div>
    <div class="value" id="value2">大胸大胸</div>
    <div class="value" id="value3">小张小张</div>
  </div>

  <script>
    var mess = document.getElementById("mess");
    if(window.WebSocket){
      var ws = new WebSocket('ws://192.168.17.80:8001');

      ws.onopen = function(e){
        console.log("连接服务器成功");
        ws.send("game1");
      }
      ws.onclose = function(e){
        console.log("服务器关闭");
      }
      ws.onerror = function(){
        console.log("连接出错");
      }

      ws.onmessage = function(e){
        mess.innerHTML = "连接成功"
        document.querySelector(".kuang").onclick = function(e){
          var time = new Date();
          ws.send(time + " game1点击了“" + e.target.innerHTML+"”");
        }
      }
    }
  </script>
</body>
</html>

【game2代码】:获取服务推送来的消息,并且显示

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .kuang{text-align: center;margin-top:200px;}
    #mess{text-align: center}
  </style>
</head>
<body>
  <div id="mess"></div>

  <script>
    var mess = document.getElementById("mess");
    if(window.WebSocket){
      var ws = new WebSocket('ws://192.168.17.80:8001');

      ws.onopen = function(e){
        console.log("连接服务器成功");
        ws.send("game2");
      }
      ws.onclose = function(e){
        console.log("服务器关闭");
      }
      ws.onerror = function(){
        console.log("连接出错");
      }

      ws.onmessage = function(e){
        var time = new Date();
        mess.innerHTML+=time+"的消息:"+e.data+"<br>"
      }
    }
  </script>
</body>
</html>

运行截图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • WebSocket+node.js创建即时通信的Web聊天服务器

    本文实例node.js创建即时通信的Web聊天服务器,供大家参考,具体内容如下 1.使用nodejs-websocket  nodejs-websocket是基于node.js编写的一个后端实现websocket协议的库,  连接:https://github.com/sitegui/nodejs-websocket.  (1)安装  在项目目录下通过npm安装:npm install nodejs-websocket  (2)创建服务器 //引入nodejs-websocket var ws

  • 基于Node.js + WebSocket打造即时聊天程序嗨聊

    前端一直是一块充满惊喜的土地,不仅是那些富有创造性的页面,还有那些惊赞的效果及不断推出的新技术.像node.js这样的后端开拓者直接将前端人员的能力扩大到了后端.瞬间就有了一统天下的感觉,来往穿梭于前后端之间代码敲得飞起,从此由前端晋升为'前后端'. 本文将使用Node.js加web socket协议打造一个网页即时聊天程序,取名为HiChat,中文翻过来就是'嗨聊',听中文名有点像是专为寂寞单身男女打造的~ 其中将会使用到express和socket.io两个包模块,下面会有介绍. 源码 源码

  • NodeJs 实现简单WebSocket即时通讯的示例代码

    服务器的实现很简单,先装一个nodeJs的模块,叫nodejs-websocket , 直接在nodeJs命令行中敲入:npm install nodejs-websocket回车就可以安装好了,然后就可以开始建立服务器了,因为有了nodejs-websocket模块,所以很多工作都不用我们自己做,直接调用别人封装好的方法就行了: 服务端代码 根据客户端传来的消息判断哪个是game1,哪个是game2,保存connection对象. var ws = require("nodejs-websoc

  • SpringBoot实现WebSocket即时通讯的示例代码

    目录 1.引入依赖 2.WebSocketConfig 开启WebSocket 3.WebSocketServer 4.测试连接发送和接收消息 5.在线测试地址 6.测试截图 1.引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>

  • Python基于socket实现简单的即时通讯功能示例

    本文实例讲述了Python基于socket实现简单的即时通讯功能.分享给大家供大家参考,具体如下: 客户端tcpclient.py # -*- coding: utf-8 -*- import socket import threading # 目标地址IP/URL及端口 target_host = "127.0.0.1" target_port = 9999 # 创建一个socket对象 client = socket.socket(socket.AF_INET,socket.SOC

  • koa socket即时通讯的示例代码

    前言 http的特点是一问一答,而即时通讯是需要双向通信的,这样以前的即时通信只能使用轮询的方式通过周期性的ajax请求获取数据,直到websocket出现,就完美实现了双向通信 一 即时通讯方式简介 段轮询 前台使用setInterval进行定时请求后台,这样无疑非常浪费性能 长轮询和长连接(html5的EventSource) 客服端连接一次,服务端不断开连接,服务端接收到新消息就发送给前台,客服端和服务端保持一直连接,缺点是只有服务端向客服端输出 websocket websocket不再

  • nodejs结合Socket.IO实现websocket即时通讯

    目录 为什么要用 websocket Socket.io 开源项目 效果预览 app.js index.html 为什么要用 websocket websocket 是一种网络通信协议,一般用来进行实时通信会使用到. websocket 协议和 http 协议类似,http 协议有一个缺陷,只能由客户方端发起请求,服务端根据请求 url 和传过去的参数返回对应结果 websocket 是双向通信的,只要 websocket 连接建立起来,可以由客户端给服务端发送数据,也可以由服务端主动给客户端发

  • NetCore WebSocket即时通讯示例

    NetCore WebSocket 即时通讯示例,供大家参考,具体内容如下 1.新建Netcore Web项目 2.创建简易通讯协议 public class MsgTemplate { public string SenderID { get; set; } public string ReceiverID { get; set; } public string MessageType { get; set; } public string Content { get; set; } } Se

  • nodejs和react实现即时通讯简易聊天室功能

    npx create-react-app socketio-demo 进入socketio-demo目录 运行eject进行拆包,本项目也可以不拆,这是个人习惯. 注意如果运行eject命令最好在项目初始阶段执行,已经开始编写后不要再使用容易出现bug,新人谨慎使用eject命令 yarn eject 项目拆包后创建服务器文件夹和文件 mkdir server type null>index.js 创建完成后目录如下 编写即时通讯(聊天室)后台 安装nodejs插件 npm i express

  • Vue3+NodeJS+Soket.io实现实时聊天的示例代码

    目录 前言 前端部分 样式搭建 socket.io-client 后端部分 总结 前言 要想实现一对一实时聊天,我们需要使用 websocket 协议,目前流行的浏览器都支持这个协议. node.js提供了高效的服务端运行环境,但是由于浏览器端对HTML5的支持不一,为了兼容所有浏览器,提供卓越的实时的用户体验,并且为程序员提供客户端与服务端一致的编程体验,于是Socket.io诞生. Socket.io将Websocket和轮询机制以及其它的实时通信方式封装成了通用的接口,并且在服务端实现了这

  • C++ 实现即时通信的示例代码(直接运行)

    目录 题目 软件:VS 服务器端 客户端 题目 由于本学期上了网络编程课程,老师要求写使用Socke实现网络编程.于是参考C++多线程实现即时通信软件写出了简单版本的没有界面的即时通信软件. 软件:VS 直接上代码,需要讲解原理的,可以参考C++多线程实现即时通信软件 服务器端 //TcpServer_plus.exe #include<stdio.h> #include <Winsock2.h> #include<WS2tcpip.h> #pragma comment

  • C#中使用async和await实现异步Udp通讯的示例代码

    目录 C/S架构 客户端实现 客户端主流程和实现 客户端发送消息实现 客户端监听消息实现 服务器实现 服务器主流程和实现 服务器发送消息实现 服务器监听消息实现 总结 在之前的C#版本中, 如果我们想要进行异步的Udp, 需要单开线程接收消息, C#7.1开始, 我们可以使用async/await关键字来编写异步代码, 我们今天一起来探索怎么实现. C/S架构 我们要实现两个app, 一个客户端和一个服务器, 各自都可以发消息和收消息.发消息很简单, 收消息的话需要一直在端口上监听. udp相比

随机推荐